CSS中繪制正六邊形的實現(xiàn)方法

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

<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)建了一個類名為hexagon的div元素，并使用CSS來繪制正六邊形，我們設(shè)置div的寬度和高度，并添加背景顏色和邊框，我們使用before和after偽元素來繪制正六邊形的兩個三角形，通過設(shè)置border-style為solid，并調(diào)整border-width和border-color的值，我們可以得到正六邊形的形狀，我們通過調(diào)整top和left或right屬性來控制正六邊形的位置。