CSS是前端開發(fā)中非常重要的一部分，可以用它來實現(xiàn)各種各樣的效果。今天我們來看一下如何使用CSS來制作五邊形。

.pentagon {
width: 100px;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #f00;
border-left: 100px solid transparent;
border-top: 70px solid transparent;
position: relative;
margin: 50px 0;
}
.pentagon:before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -140px;
left: -100px;
border-right: 100px solid transparent;
border-bottom: 70px solid #f00;
border-left: 100px solid transparent;
border-top: 70px solid transparent;
}

代碼中，我們定義了一個名為.pentagon的類，設置了它的寬度、高度和邊框樣式。border-right和border-left設置了右邊和左邊的三角形，border-bottom則設置了底部的梯形。同時，我們還定義了一個偽元素:before，為五邊形增加一個三角形，使得整個形狀更完美。

接下來，我們只需要在HTML中引用CSS，并加上類名.pentagon即可。

<div class="pentagon"></div>

至此，我們已經(jīng)成功地制作出了一個五邊形，同時也熟悉了如何使用CSS來寫形狀。