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>
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 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>
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 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>
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/
Trying to manipulate only One side of a div
This looks like what you might be looking for: Matrix transformation
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
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>
Related Topics
Href Syntax: Is It Okay to Have Space in File Name
Best Practices For Styling HTML Emails
≪!--[If !Ie]≫ Is Not Working as Expected in This Case
Two Forward Slashes in a Url/Src/Href Attribute
How to Style Svg With External Css
The Reference to Entity "Foo" Must End With the ';' Delimiter
Using Flex Order Property to Re-Arrange Items For Desktop and Mobile Views
Limit Number of Characters Allowed in Form Input Text Field
Download Attribute on a Tag Not Working in Ie
Why Isn't Object-Fit Working in Flexbox
How to Animate Underline from Left to Right
Problems With CSS Sticky Footer
Html Table Headers Always Visible At Top of Window When Viewing a Large Table
Favicon Not Showing Up in Google Chrome
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do