如何用CSS繪制六邊形

在CSS中，我們可以使用polygon()函數(shù)來(lái)繪制六邊形。polygon()函數(shù)接受一個(gè)參數(shù)，即一個(gè)包含每個(gè)角點(diǎn)坐標(biāo)的列表，以下是一個(gè)示例，展示如何繪制一個(gè)六邊形：

.hexagon {
  shape-rendering: crispEdges;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #f0f0f0 transparent transparent #f0f0f0;
}
.hexagon:before {
  top: -30px;
  left: -30px;
}
.hexagon:after {
  top: -30px;
  right: -30px;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)類(lèi)名為hexagon的六邊形，我們?cè)O(shè)置了一個(gè)寬度為200像素、高度為100像素的背景顏色，并添加了邊框，我們使用偽元素::before和::after來(lái)繪制六邊形的兩個(gè)三角形部分，每個(gè)偽元素都設(shè)置了position: absolute;來(lái)定位它們的位置，并設(shè)置了border-style: solid;來(lái)繪制實(shí)線邊框。border-width屬性用于設(shè)置邊框的寬度，而border-color則用于設(shè)置邊框的顏色，我們通過(guò)調(diào)整top和left或right屬性來(lái)定位每個(gè)偽元素的具體位置。