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