Slanted div using css and transparency

Question

I've seen several questions about this and all of them seem to use solid backgrounds to create the slant, if this is a duplicate of another question I apologize, I have tried to search for this endlessly.

Problem: I want to know how to slant either one side of a div or both to achieve the end result below while making it cross browser compatible and responsive.

I have attached the two images below to help with the demonstration.

Note: If someone has text within the div I do not want it to get skewed. If not possible with css alone please provide a js version.

Two Images:

End Result:

You could also have a look at [this thread](http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive). — Harry, Nov 17 '15 at 04:22
I don't believe that the question can be considered as too broad. It's perfectly clear for me. — vals, Nov 17 '15 at 06:42

score 2 · Answer 1 · answered Nov 16 '15 at 20:13

This is possible in css using clip-path and position: absolute. (Unfortunately, this will not work on Firefox or IE)

div {
    position: absolute;
    top: 0;
    height: 400px;
    width: 500px;
}
.img1 {
    background-image: url(https://i.stack.imgur.com/E9Sl2.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
    clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
}
.img2 {
    background-image: url(https://i.stack.imgur.com/Nl3Fw.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
}

<div class="img1"></div>
<div class="img2"></div>

score 2 · Answer 2 · answered Nov 16 '15 at 20:26

One way to get this result in all the modern browsers is thru the use of an additional div, to contain at least on of the images.

This div will be rotated, overflow hidden, and then the background inside it rotated again in the opposite direction

.base {
    width: 400px;
    height: 300px;
    position: relative;
    overflow: hidden;
    background-image: url(http://placekitten.com/1000/750);
    background-size: cover;
}

.image2 {
    position: absolute;
    width: 120%;
    height: 70%;
    bottom: 50%;
    left: -10%;
    transform: rotate(15deg);
    overflow: hidden;
}

.image2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 140%;
    top: 20%;
    left: 10%;
    transform: rotate(-15deg);
    background-image: url(http://placekitten.com/1200/900);
    background-size: cover;
}

<div class="base">
<div class="image2"></div>
</div>

score 1 · Accepted Answer · answered Nov 16 '15 at 20:58

Using SVG you get better browser support than clip-path + some other cool stuff.

.clip-block {
  text-align: center;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0 20px;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-svg-1 {
  width: 200px;
  height= 200px;
  -webkit-clip-path: url("#clip-polygon");
  clip-path: url("#clip-polygon");
}
.clip-svg-2 {
  width: 200px;
  height= 200px;
  -webkit-clip-path: url("#clip-polygon2");
  clip-path: url("#clip-polygon2");
  margin-top: -104px;
}

<div class="clip-block">
  <div class="clip-wrap">
    <img src="http://lorempixel.com/200/200/animals/4" alt="" class="clip-svg-1">
  </div>
</div>

<div class="clip-block">
  <div class="clip-wrap">
    <img src="http://lorempixel.com/200/200/animals/6" alt="" class="clip-svg-2">
  </div>
</div>
<svg class="clip-svg">
  <defs>
    <clipPath id="clip-polygon" clipPathUnits="objectBoundingBox" >
      <polygon points="0 0.5, 0 0, 1 0, 1 1" />
    </clipPath>
  </defs>
</svg>
<svg class="clip-svg">
  <defs>
    <clipPath id="clip-polygon2" clipPathUnits="objectBoundingBox" >
      <polygon points="0 1, 0 0, 1 0.5, 1 1" />
    </clipPath>
  </defs>
</svg>

Slanted div using css and transparency

3 Answers3