CSS中繪制六邊形的方法

在CSS中，我們可以使用polygon函數(shù)來繪制六邊形。polygon函數(shù)接受6個參數(shù)，分別代表六邊形的六個頂點(diǎ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 50px;
}
.hexagon:before {
  border-color: transparent transparent #f0f0f0;
  top: -50px;
  left: -50px;
}
.hexagon:after {
  border-color: #f0f0f0 transparent transparent;
  top: -50px;
  right: -50px;
}

在這個示例中，我們創(chuàng)建了一個六邊形，并將其背景色設(shè)置為#f0f0f0，邊框設(shè)置為1px的#000顏色，通過使用before和after偽元素，我們可以創(chuàng)建兩個三角形，分別填充六邊形的上部分和下部分，這種方法可以模擬出六邊形的形狀。