如何用CSS繪制六邊形

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

.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;
}

在這個示例中，我們創(chuàng)建了一個類名為hexagon的六邊形，我們設(shè)置shape-rendering屬性為crispEdges，確保形狀的邊緣是清晰的，我們設(shè)置width和height屬性來定義六邊形的大小，我們使用border屬性來繪制六邊形的邊框，我們使用偽元素::before和::after來繪制六邊形的兩個三角形部分。