CSS 是一種交互式樣式表語(yǔ)言，用于為 HTML 和 XML（包括諸如 SVG、MathML 和 XUL 等 XML 類別）文檔的呈現(xiàn)添加樣式。CSS 可用于對(duì) HTML 中的元素應(yīng)用樣式。它可以改變 HTML 元素的大小、顏色、位置、字體和其他屬性。這里將會(huì)向大家介紹如何使用 CSS 樣式來(lái)畫多邊形。

.polygon {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid red;
}

通過(guò)上面的代碼來(lái)畫一個(gè)紅色的等腰三角形。 接下來(lái)，讓我們看看如何畫一個(gè)正五邊形：

.polygon {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
}

上面的代碼通過(guò)設(shè)置不同的 border 寬度和顏色，實(shí)現(xiàn)了畫正五邊形。同樣的技巧也可以用來(lái)畫其他形狀，比如矩形、梯形和菱形等等。

除此之外，還可以使用偽元素來(lái)實(shí)現(xiàn)更靈活多變的圖形。比如通過(guò)旋轉(zhuǎn)和網(wǎng)格線來(lái)畫出一個(gè)六邊形：

.hexagon {
position: relative;
width: 100px;
height: 57.74px;
margin: 28.87px 0;
background-color: #007bff;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #007bff;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 28.87px solid #007bff;
}

上面的代碼通過(guò)使用 before 和 after 偽元素來(lái)畫出一個(gè)六邊形。這種方法可以應(yīng)用于其他圖形，比如三角形、菱形和梯形等等。

總之，CSS 樣式可以實(shí)現(xiàn)多種多樣的多邊形圖形，只要我們掌握了基本的技巧和知識(shí)，就可以輕松地實(shí)現(xiàn)各種形狀的圖形。