CSS作為前端開發(fā)中的重要一環(huán)，除了可以調(diào)整元素的樣式外，還可以通過定位實(shí)現(xiàn)一些炫酷的效果，比如直角梯形。

直角梯形是指有一個(gè)直角角度為90度的四邊形，其中相鄰兩邊長度不同，我們可以通過CSS中的transform屬性來實(shí)現(xiàn)。

.trapezoid {
width: 150px;
height: 0;
border-bottom: 50px solid #333;
border-right: 75px solid transparent;
position: relative;
transform: skew(-20deg);
margin: 50px auto 0;
}

首先，我們先設(shè)置一個(gè)div元素的寬度為150px和高度為0，然后通過border-bottom屬性設(shè)置下邊框?yàn)?0px的實(shí)線，右邊框?yàn)?5px的空線。這樣我們就得到了一個(gè)平行四邊形。

接下來，我們給這個(gè)元素設(shè)置position為relative，目的是為了在該元素內(nèi)部創(chuàng)建一個(gè)偽元素用來增加上邊框，同時(shí)還要為該元素設(shè)置transform：skew（-20deg）屬性，讓它按照左下角為起點(diǎn)沿著逆時(shí)針方向傾斜20度。這里需要注意的是，設(shè)置skew屬性只會(huì)傾斜框，不會(huì)對其中的內(nèi)容進(jìn)行傾斜，因此我們需要在傾斜前把整個(gè)元素的寬度加大。

最后，我們在該元素里面創(chuàng)建一個(gè)偽元素用來實(shí)現(xiàn)上邊框，同時(shí)設(shè)置相應(yīng)的顏色和寬度即可。

.trapezoid::before {
content: "";
width: 130px;
height: 0;
border-top: 50px solid #333;
border-left: 65px solid transparent;
position: absolute;
top: -50px;
left: 0;
}

通過這樣的設(shè)置，我們就可以輕松實(shí)現(xiàn)一個(gè)直角梯形效果，同樣的原理還可以用來實(shí)現(xiàn)三角形、菱形等不同形狀的效果。