How to skew on the underside of a div without affecting sensitive devices

Question

How to make a skew on the underside of a div without affecting the change in height and width in response. See Image. I tried a CSS transform property that could not fix this. And I want to apply a background repeat pattern and a window 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 to the DOM.

, div, , , , , trcik.

, , , , .

, ,

.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>

Hide result

. . IE - , .

Answer 2

:

- , div . - :

.mydiv {
  width:100%;
  background:url(http://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>

Hide result

/ (, PNG/JPEG) (, SVG), //, . SVG ( IE9 +, IE)... background-size, IE9+. , , SVG .

---

IE8 , : position:relative .mydiv, position:absolute, / .mydiv ( z-).

, "100% 100%" CSS2, IE. , SVG ( IE < 8).

:

.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="http://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>

Hide result

, ... , SVG ( ), IE ( , PNG).

---

, , SVG inline, ( ) .

.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>

Hide result