怎么利用css调整区块大小,使用CSS3 transform:skew方法实现的倾斜区块分割

CSS

语言：

CSSSCSS

确定

body {

background: #FF7A2E;

color: white;

font-family: Open sans, Helvetica Neue;

font-weight: bold;

margin: 0;

text-align: center;

}

header {

padding: 100px 1em;

}

.slanty-wrapper {

background: #8C87FF;

-webkit-transform: skew(0, 4deg);

-ms-transform: skew(0, 4deg);

transform: skew(0, 4deg);

margin-bottom: -5em;

}

.slanty-wrapper .slanty-content {

-webkit-transform: skew(0, -4deg);

-ms-transform: skew(0, -4deg);

transform: skew(0, -4deg);

}

.slanty-wrapper + .slanty-wrapper {

background: #77CC64;

-webkit-transform: skew(0, -2deg);

-ms-transform: skew(0, -2deg);

transform: skew(0, -2deg);

}

.slanty-wrapper + .slanty-wrapper .slanty-content {

-webkit-transform: skew(0, 2deg);

-ms-transform: skew(0, 2deg);

transform: skew(0, 2deg);

}

.slanty-content,

footer {

padding: 10em 1em;

}

footer {

background: #1FB200;

z-index: 1000;

position: relative;

}