CSS六邊形制作詳解

在CSS中，我們可以使用shape-outside屬性來創(chuàng)建一個六邊形，這個屬性接受一個函數(shù)作為參數(shù)，我們可以使用polygon()函數(shù)來定義一個六邊形，下面是一個簡單的示例：

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

.hexagon {
  width: 200px;
  height: 100px;
  shape-outside: polygon(50% 0%, 100% 20%, 50% 40%, 0% 20%, 50% 0%);
  padding: 20px;
  box-sizing: border-box;
}

在這個示例中，我們定義了一個六邊形，并將其應用到一個div元素上。shape-outside屬性接受一個polygon()函數(shù)，該函數(shù)接受一系列坐標作為參數(shù)，這些坐標定義了多邊形的形狀，在這個例子中，我們提供了六邊形的六個坐標點。

shape-outside屬性僅適用于具有足夠空間來繪制形狀的元素，我們需要確保div元素有足夠的寬度和高度來繪制六邊形，我們還設(shè)置了padding屬性來確保元素內(nèi)部有足夠的空間。

我們使用box-sizing: border-box;來確保元素的寬度和高度包括邊框和填充，這是非常重要的，因為shape-outside屬性僅適用于元素的“形狀”，而不影響元素的“大小”，我們需要確保元素的大小包括邊框和填充，以便能夠正確地繪制六邊形。