html自动边界法,html – 一个Div的偏僻边界

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

HTML – 很简单

text..

text..

text..

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

}