html – 一个Div的偏僻边界

概述我试图扭曲一个div，类似于： Slant the top of a div using css without skewing text 或者： http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/ 这是我想要做的一个形象： 基本上，我需要在所有四方面以奇怪的方式倾斜边界。我可以用背景图像来做到这一点，但是我更喜欢某些方 我试图扭曲一个div，类似于：
Slant the top of a div using css without skewing text
或者： http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

这是我想要做的一个形象：

基本上，我需要在所有四方面以奇怪的方式倾斜边界。我可以用背景图像来做到这一点，但是我更喜欢某些方法在CSS中执行，所以div可以在宽度和高度上做出反应。我想找到一个适用于旧版浏览器的解决方案，但我明白我不能拥有一切！

在四面线上倾斜边界的最佳方法是什么？ (注意：绿色框底部的边框在中间倾斜，在外面倾斜，我不需要边框做这个，只有一个方向倾斜是好的。)

解决方法 我能够做出非常相似的东西。它可以在所有现代浏览器中运行。

Full Screen Demo —- jsFiddle demo

HTML – 很简单

<div>    <p>text..</p></div><div>    <p>text..</p></div><div>    <p>text..</p></div>

CSS

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);}

总结

以上是内存溢出为你收集整理的html – 一个Div的偏僻边界全部内容，希望文章能够帮你解决html – 一个Div的偏僻边界所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。