如何在div的底部倾斜而不影响响应设备

Question

如何在div的底部倾斜而不影响高度和宽度的响应时间。请看图片。我尝试了CSS转换属性，但无法解决此问题。我想为其应用背景重复图案和框阴影。

.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

为了获得这个结果，我需要在 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>

注意：使用剪辑路径可以更轻松地实现这一点。但由于 IE 仍然缺少这种能力，我宁愿走很长的路，并获得完整的现代浏览器支持