CSS3 Transform Skew One Side
Try this:
To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.
.container { overflow: hidden;}
#parallelogram { width: 150px; height: 100px; margin: 0 0 0 -20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; overflow: hidden; position: relative;}
.image { background: url(http://placekitten.com/301/301); position: absolute; top: -30px; left: -30px; right: -30px; bottom: -30px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}
<div class="container"> <div id="parallelogram"> <div class="image"></div> </div></div>
Skew one side only of an element
See Snippet
#parallelogram-container { margin: 0 50px;}
.parallelogram { position: relative; background: #008dd0; width: 100px; border: none; display: inline-block; height: 90px; padding: 0px; margin: 0 1px;}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) { transform-origin: bottom left; -ms-transform: skew(-28deg, 0deg); -webkit-transform: skew(-28deg, 0deg); transform: skew(-28deg, 0deg); margin-left: 1px;}
.parallelogram:nth-child(1):after { content: " "; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background: #008dd0; transform-origin: bottom left; -ms-transform: skew(-28deg, 0deg); -webkit-transform: skew(-28deg, 0deg); transform: skew(-28deg, 0deg);}
.parallelogram-btn:before { content: " "; position: absolute; display: block; width: 100%; height: 100%; left: -51px; z-index: -1; background: #ffa008; transform-origin: bottom left; -ms-transform: skew(-28deg, 0deg); -webkit-transform: skew(-28deg, 0deg); transform: skew(-28deg, 0deg);}
.parallelogram:first-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px;}
.parallelogram-btn { width: 60px; position: relative; background: #ffa008; color: #FFF; border: none; display: inline-block; height: 90px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; padding: 0px; margin-left: 51px; font-weight: 700; cursor: pointer;}
<div id="parallelogram-container"> <div class="parallelogram"> </div> <div class="parallelogram"> </div> <a class="parallelogram-btn"> </a></div>
one sided skew with css
Add overflow:hidden
to your .bg-style1
rule and transformX(-40%)
to the transform:
in .bg-style1:after
.bg-style1 { padding-top: ; background: #ccc; position: relative; display: block; z-index: 2; overflow: hidden;}.bg-style1:after { content: " "; position: absolute; display: block; width: 30%; height: 100%; left: 0; top: 0; z-index: -1; background: #333333; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg) translateX(-50%);}
<section class="page"> <div class="bg-style1"> <h1>What is lorem ipsum</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></section>
Skew only right side of element
You could use pseudo selector :before
on first li
and style that,
/* nav stuff */
ul,li,a { display: inline-block; text-align: center;}
/* appearance styling */
ul { /* hacks to make one side slant only */ overflow: hidden;}
li { background-color: black; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg);}
li:nth-child(1):before { content: ""; position: absolute; width: 10px; height: 100%; background: black; -webkit-transform: skewX(20deg); left: -5px;}
li a { padding: 3px 15px 3px 10px; text-decoration: none; transform: skewX(20deg); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><ul class="breadcrumb"> <li><a href="">Home</a></li> <li><a href="#">Products</a></li></ul>
Skew only one side of before & after to get flat-arrow
You can adjust the transform-origin then hide the overflowing part of the skewed element and change the left border of the first child on hover:
body { margin: 0;}
.breadcrumbs { background-color: white; width: 100%; padding: 0 1rem; font-size: 0; margin: 1rem;}
.breadcrumbs .breadcrumb-step { display: inline-block; width: 12.33%; height: 5rem; text-decoration: none; color: black;}/*added this*/.breadcrumbs .breadcrumb-step:first-child { width: 15.33%; overflow:hidden; border-left:1px solid lightgrey;}/**/
.step-title { display: none;}
.breadcrumb-step:before,.breadcrumb-step:after { content: ''; display: block; height: 50%; box-sizing:border-box; width: 100%; border: 1px solid lightgrey;
}.breadcrumb-step:before { transform: skew(30deg); transform-origin:right bottom; /*added this*/ border-bottom: none;}
.breadcrumb-step:after { transform: skew(-30deg); transform-origin:right top; /*added this*/ border-top: none;}
/*added this*/.breadcrumb-step:hover:before,.breadcrumb-step:hover:after,.breadcrumbs .breadcrumb-step:first-child:hover{ border-color: black;}
<div class="breadcrumbs"> <a class="breadcrumb-step" href="#"><span class="step-title">Home</span></a> <a class="breadcrumb-step" href="#"><span class="step-title">About</span></a> <a class="breadcrumb-step" href="#"><span class="step-title">Contact Us</span></a></div>
Skew one side of image while keeping border-radius
You need something like this.
div {
width: 300px;
height: 200px;
margin: 10px 90px;
border-radius: 30px;
overflow: hidden;
-webkit-transform: perspective(300px) rotateX(-19deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg">
</div>
</body>
</html>
Skew Background Image on one side with a border
The trick is to correctly set the transform-orgin, the border and then it should be easy to apply both skew transformation. You may also need some negative margin to rectify some spaces.
I used CSS variables to make the code easy but it's not mandatory.
#about-gallery { margin: 60px 0; display: flex; flex-wrap: wrap; --s:-8deg; /* The skew factor (the same for all)*/}
.about-img-wrapper { margin: 5px; overflow: hidden; /* Don't forget this !!*/ flex-grow:1;}
.about-img-wrapper > * { height: 300px; background: center/cover no-repeat; overflow: hidden; /* Don't forget this !!*/ transform:skewX(var(--s,0deg));}/* We need skewY for the 3 last element */.about-img-wrapper:nth-child(n + 3) > * { transform:skewY(var(--s,0deg));}/* The pseudo element will get the image and the inverse of skewing */.about-img-wrapper > *::before { content:""; display:block; height:100%; background:inherit; /* inherit the image */ transform-origin: inherit; /* inherit the same transform-origin */ transform:skewX(calc(-1*var(--s,0deg)));}.about-img-wrapper:nth-child(n + 3) > *::before { transform:skewY(calc(-1*var(--s,0deg)));}
/**/.image-1 { border-left: solid 10px black; flex-basis:50%; margin-right:-15px;}
.image-1>* { transform-origin: top; border: solid 10px black;border-left: none;}/**/.image-2 { border-right: solid 10px black; flex-basis:40%; margin-left:-15px;}.image-2>* { transform-origin: bottom; border: solid 10px black;border-right: none;}/**/.image-3 { border-top: solid 10px black; flex-basis:100%;}.image-3>* { transform-origin: left; border: solid 10px black;border-top: none;}/**/.image-4,.image-5{ border-bottom: solid 10px black; flex-basis:40%; margin-top:-5vw;}.image-4>*,.image-5>* { transform-origin: right; border: solid 10px black;border-bottom: none;}.image-5 { margin-top:-12vw;}.image-5>* { height:calc(300px + 7vw); /* We need a bigger height here */}/**/* { box-sizing: border-box;}
<div id="about-gallery"> <div class="about-img-wrapper image-1"> <div style="background-image: url(https://picsum.photos/id/10/800/800);"></div> </div> <div class="about-img-wrapper image-2"> <div style="background-image: url(https://picsum.photos/id/102/800/800);"></div> </div> <div class="about-img-wrapper image-3"> <div style="background-image: url(https://picsum.photos/id/123/800/800);"></div> </div> <div class="about-img-wrapper image-4"> <div style="background-image: url(https://picsum.photos/id/14/800/800);"></div> </div> <div class="about-img-wrapper image-5"> <div style="background-image: url(https://picsum.photos/id/20/800/800);"></div> </div>
</div>
How can I skew one side of a div and then replicate it and skew a different side?
HTML
<div class="crop">
<div class="skew"></div>
</div>
CSS
.crop {
width: 492px;
height: 240px;
overflow: hidden;
}
.skew {
display: block;
height : 100px;
width : 500px;
background : blue;
margin : 0 auto 0 32px;
position:relative;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
}
.skew:after {
height : 100px;
width : 500px;
background : blue;
margin : 0 auto;
position:absolute;
bottom: -120px;
content:'';
}
Fiddle: http://jsfiddle.net/neybabgj/7/
Related Topics
What's the Difference Between Padding and Margin
Sass: Set Variable at Compile Time
:Hover Not Working on Svg When Svg Is in External File
Target First Letter of Each Word in CSS
Prefer Shrinking Over Growing in a Flex Container with Flex-Flow: Row Wrap
CSS Display:None and Visibility:Hidden
Cannot Change the Content of Visited :Before Pseudo-Elements
Pure CSS: Center Tooltip Above Text on Hover Pt. 2
Nightwatch Cannot Find/Click on Dropdown Option
A:Visited Links - Opacity Not Working
Adding Class to Editorfor in MVC
Create Clip-Path Wave CSS Edges
Less Class Name String Interpolation Not Working
Prevent :After Element from Wrapping to Next Line
Font Awesome 5 Pseudo-Class Not Working with My Kit
How to Deploy a Jekyll Site Locally with CSS, Js and Background Images Included