CSS多邊形實(shí)現(xiàn)

CSS中可以用border屬性實(shí)現(xiàn)各種形狀的多邊形，下面我們將介紹如何用CSS實(shí)現(xiàn)三角形和六邊形。

三角形實(shí)現(xiàn)

要實(shí)現(xiàn)一個(gè)三角形，我們可以設(shè)置一個(gè)元素的寬度為0，高度為0，然后設(shè)置上邊框的寬度為50px，顏色為紅色，右邊框的寬度為0，左邊框的寬度為0，下邊框的寬度為0。代碼如下：

#triangle{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
}

六邊形實(shí)現(xiàn)

要實(shí)現(xiàn)一個(gè)六邊形，我們可以設(shè)置一個(gè)元素的寬度為100px，高度為55px，背景色為綠色，然后通過(guò)偽元素：before和：after來(lái)實(shí)現(xiàn)上半部分和下半部分的形狀。代碼如下：

#hexagon{
width: 100px;
height: 55px;
position: relative;
background-color: green;
}
#hexagon:before,
#hexagon:after{
content: "";
position: absolute;
top: -25px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#hexagon:before{
left: -50px;
border-bottom: 25px solid green;
}
#hexagon:after{
right: -50px;
border-bottom: 25px solid green;
}