Css3 Transform Skew One Side

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>

Css3 Transform Skew One Side