CSS怎么寫六邊形

在CSS中，我們可以使用shape-outside屬性來繪制六邊形。shape-outside屬性接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)描述了形狀的外輪廓，我們可以使用polygon()函數(shù)來繪制一個(gè)六邊形。

下面是一個(gè)示例代碼，展示了如何使用CSS繪制一個(gè)六邊形：

.hexagon {
  width: 200px;
  height: 100px;
  shape-outside: polygon(50% 0%, 100% 20%, 80% 50%, 50% 80%, 20% 50%, 0% 20%);
  padding: 20px;
  border: 2px solid #333;
  border-radius: 10px;
}

在這個(gè)示例中，我們定義了一個(gè)類名為hexagon的樣式，其中shape-outside屬性使用polygon()函數(shù)繪制了一個(gè)六邊形。polygon()函數(shù)的參數(shù)是一個(gè)包含六個(gè)點(diǎn)的列表，每個(gè)點(diǎn)由兩個(gè)百分比值表示，分別代表該點(diǎn)在容器寬度和高度的比例。

通過調(diào)整這些百分比值，你可以改變六邊形的大小和形狀，我們還設(shè)置了padding屬性來增加內(nèi)部空間，border屬性來添加邊框，以及border-radius屬性來添加圓角。

你可以將上述代碼復(fù)制到你的CSS樣式表中，并應(yīng)用到需要繪制六邊形的元素上。