如何用CSS繪制正六邊形

在CSS中，我們可以使用polygon()函數(shù)來(lái)繪制正六邊形。polygon()函數(shù)接受6個(gè)參數(shù)，分別代表正六邊形的6個(gè)頂點(diǎn)，下面是一個(gè)簡(jiǎn)單的示例：

<div class="hexagon"></div>

.hexagon {
  shape-rendering: crispEdges;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  position: relative;
}
.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è)div元素，并為其添加了一個(gè)類名hexagon，我們使用CSS來(lái)定義這個(gè)元素的樣式和背景顏色，我們使用before和after偽元素來(lái)繪制正六邊形的兩個(gè)三角形，每個(gè)三角形的頂點(diǎn)由border-width和border-color屬性定義，我們通過(guò)調(diào)整top和left或right屬性來(lái)控制三角形的位置。