CSS多邊形實現

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

三角形實現

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

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

六邊形實現

要實現一個六邊形，我們可以設置一個元素的寬度為100px，高度為55px，背景色為綠色，然后通過偽元素：before和：after來實現上半部分和下半部分的形狀。代碼如下：

#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;
}