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;

}

總結

以上是生活随笔為你收集整理的怎么利用css调整区块大小,使用CSS3 transform:skew方法实现的倾斜区块分割的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。