How to make skew on bottom side of a div without affecting responsive devices

Question

How to make skew on bottom side of a div without affecting when height & width changes in responsive. Please see the image . I have tried CSS transform property which couldn't fix this. And I want to apply a background repeating pattern and box shadow for it.

.mydiv
{
    height:400px;
    /*width:100%;*/
    width:350px;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    -webkit-transform: rotate(-3.8deg);
    background:url(http://www.emoticonswallpapers.com/background/thumb/nice/nice-background-pattern-184.gif);
}

http://jsfiddle.net/harikriz92/266f31o8

Answer 1

To get this result, I needed to add some elements in the DOM.

Basically, a triangle div that will be composed of a base, to get overflow hidden on the left side, and also to get a fixed ratio, using a padding trcik.

Next, a triangle inner to get te rotation needed, and overflow to cut alogn the diagonal line.

And, inside this one, a pseudo to set the background pattern

The shadow can be achieved directly on a pseudo of the base element

.test {
    width: 60%;
    position: relative;
    background-position: bottom left;
    background-image: url("http://emoticonswallpapers.com/background/animals/animal-backgound-pattern-015.gif");
}

.test:after {
    content: "";
    position: absolute;
    width: 103%;
    height: 2px;
    top: 100%;
    right: 0px;
    transform: rotate(-14deg);
    transform-origin: top right;
    box-shadow: 0px 4px 6px 0px black;
}

.trianglebase {
    width: 100%;
    padding-top: 25%;
    position: absolute;
    top: 100%;
    left: 0px;
    overflow: hidden;
    z-index: -1;
}

.triangleinner {
    width: 104%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(-14deg);
    transform-origin: bottom left;
    overflow: hidden;
}

.triangleinner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image: url("http://emoticonswallpapers.com/background/animals/animal-backgound-pattern-015.gif");
    transform: rotate(14deg);
    transform-origin: bottom left;
}

<div class="test">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<div class="trianglebase">
<div class="triangleinner">
</div>
</div>
</div>

Note: This can be achieved much easier with a clip path. But since IE is still missing this ability, I preferred to go the long hard way, and get full modern browser support

Answer 2

Here are two possible solutions:

Using Background-size

One simple option would be to have a background image with the shape that you want that fits the whole size of the div and that adapts to its size changes. Something like this:

.mydiv {
  width:100%;
  background:url(https://i.stack.imgur.com/Kbmfx.png);
  background-size:100% 100%;
  padding-bottom:30px;
}

<div class="mydiv">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>

If instead of using a bitmap/raster image (like PNG/JPEG), you use a vector image (like SVG), then you would avoid the distortion/blurriness/pixelization that can be seen when scaling. And SVG is supported by all major browsers (including IE9+, but not older versions of IE)... but anyway, this solution uses background-size that is not supported until IE9+. So if this solution works, SVG should work with it.

---

Using an absolute-positioned image

If you still want to support IE8 and below, here is another possible solution: add a position:relative to .mydiv, then place an image with position:absolute occupying the whole width/height of .mydiv in the back of it (using a negative z-index).

The effect would be similar to having that image as background with a size of "100% 100%" and it's CSS2, so supported by older versions of IE. Again, using SVG will avoid having blurry edges (but wouldn't work on IE<8).

Here is a demo:

.mydiv {
  position:relative;
  width:100%;
  padding-bottom:30px;
}

.mydiv .bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

<div class="mydiv">
  <img src="https://i.stack.imgur.com/Kbmfx.png" alt="" class="bg" />
  <p>Line 0</p>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>

One good thing about these solutions is that they are really simple to implement... But on the bad side, the shadow may still look a bit funky, and if you use SVG (I would) it is not supported in older versions of IE (although you could have a fallback solution for those browsers using PNG).

---

Finally, this is a demo solution using SVG inline, as the shadow effect (that I got from Erik Dahlström's answer) would be cut otherwise.

.mydiv {
  position:relative;
  width:100%;
  padding-bottom:30px;
}

.mydiv svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:-1;
}

<div class="mydiv">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"  viewBox="0 0 1000 1000" width="100%" height="100%">
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
      <feOffset dx="0" dy="0" result="offsetblur"/>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter> 
    <path d="M0,0 1000,0 1000,900 0,1000Z" fill="red" style="filter:url(#dropshadow)" />
  </svg>
  <p>Line 0</p>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>