Skew One Corner of Image

Skew one corner of image

All you need to do is to think in 3d:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}

fiddle

explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.

See how can be controlled what is the final size

fiddle with multiple options

Skew only one corner of a div

Here is another solution (after your comment). Though I have not removed, this <div class=" wrapper "> has no duty here.

.wrapper {  width: 100%;  /* may remove width:100%, as div is always 100% */  margin: 0 auto;  overflow: hidden;}
.position-relative {  min-height: 400px;  background: purple;  width: 100%;  /* may remove width:100%, as div is always 100% */  /* transform-origin: bottom; */  /* transform: skewX(-17deg); */  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);}

<div class="wrapper">  <div class="position-relative"> </div></div>

Skew One Corner And Add Border Radius To Opposite Corner

Something like this but still hard to master. I would consider using an image.

span {
    border: 2px dashed blue;
    border-radius: 8px 0px 8px 0px;
    padding: 6px;
    font-size: 18px;
    display: inline-block;
    background:#0CF;
    position:relative;
    box-sizing: border-box
}
span:after{
      content:"";
      width: 15px;
      height:90%;
      position:absolute;
      right:-8px;
      top:-2px;
      background:#0CF;
       transform: skewX(-20deg);
       border-top: 2px dashed blue;
       border-right: 2px dashed blue;
       box-sizing: border-box
}

<span>Shift top-right corner</span>

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>

How to transform skew only towards bottom corners?

You can start with something like this, clean and simple without multiple divs.

#trapezium {  width: 200px;  height: 100px;  margin: 50px;  transform: perspective(100px) rotateX(-45deg);  background-color: gray;}

<div id='trapezium'></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>

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