css – 如何在不影响响应设备的情况下在div的底部进行倾斜

2023年12月1日 179次阅读

如何在不影响高度和高度的情况下在div的底部进行倾斜响应宽度变化.请看图像.我试过CSS转换属性无法解决这个问题.我想为它应用背景重复模式和框阴影.
《css – 如何在不影响响应设备的情况下在div的底部进行倾斜》

.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

最佳答案 为了得到这个结果,我需要在DOM中添加一些元素.

基本上,一个三角形div将由一个基础组成,以获得隐藏在左侧的溢出,并且还使用填充trcik获得固定比率.

接下来,需要一个三角形内部以获得te旋转,并且在对角线上溢出以切割.

而且,在这一个内部,一个伪设置背景图案

阴影可以直接在基本元素的伪上实现

.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仍然缺少这种能力,我更倾向于长期努力,并获得完整的现代浏览器支持

点赞