如何用CSS繪制六邊形？

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

<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 50px;
}
.hexagon:before {
  border-color: transparent transparent #f0f0f0;
  top: -50px;
  left: -50px;
}
.hexagon:after {
  border-color: #f0f0f0 transparent transparent;
  top: -50px;
  right: -50px;
}

在這個(gè)示例中，我們首先創(chuàng)建了一個(gè)名為hexagon的div元素，并設(shè)置了其寬度、高度和背景顏色，我們使用before和after偽元素來(lái)繪制六邊形的兩個(gè)三角形部分，每個(gè)偽元素都使用border屬性來(lái)繪制一個(gè)三角形，通過(guò)調(diào)整border-width和border-color來(lái)實(shí)現(xiàn)，我們通過(guò)調(diào)整top和left或right屬性來(lái)控制三角形的位置。