我正在尝试倾斜一个 div，类似于：使用 css 倾斜 div 的顶部而不倾斜文本 https://stackoverflow.com/questions/13591584/slant-the-top-of-a-div-using-css-without-skewing-text或这个：http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/ http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/
这是我正在尝试做的事情的图像：
基本上，我需要以奇怪的方式倾斜边框所有 4 面。我可以使用背景图像来做到这一点，但我更喜欢在 CSS 中使用某种方法来做到这一点，这样 div 就可以响应宽度和高度。我想找到一个适用于旧版浏览器的解决方案，但我知道我不能拥有一切！
在所有 4 条边上都有倾斜边框的最佳方式是什么？ （注意：绿色框底部的边框在中间向上倾斜，在外侧向下倾斜，我不需要边框来执行此操作。只需向一个方向倾斜即可。）
我能够做点什么非常相似..它适用于所有现代浏览器。
HTML- 非常简单
div:nth-child(1) {
background: rgb(122, 206, 122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}
div:nth-child(2) {
border-bottom: 180px solid rgb(233, 233, 65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}
div:nth-child(3) {
border-top: 140px solid rgb(253, 74, 74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}
div:nth-child(3):before {
content: '';
width: 124%;
height: 80px;
background: white;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
全屏演示 http://jsfiddle.net/JoshC/53FrA/embedded/result/ ---- jsFiddle 演示 http://jsfiddle.net/JoshC/53FrA/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
