如何用CSS制作六邊形

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

1、創(chuàng)建一個HTML元素，例如一個div：

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

2、在CSS中定義hexagon類：

.hexagon {
  width: 200px; /* 定義六邊形的寬度 */
  height: 100px; /* 定義六邊形的高度 */
  shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* 定義六邊形的形狀 */
}

在這個示例中，我們定義了一個寬度為200px、高度為100px的六邊形。shape-outside屬性中的polygon()函數(shù)定義了六邊形的六個點，這些點的順序是：左上角、右上角、右下角、左下角、左上角和右上角，通過調整這些點的位置，你可以制作出不同大小的六邊形。

shape-outside屬性是CSS的一個新特性，它允許你使用形狀來裁剪元素，這個特性在舊版本的瀏覽器中可能不被支持，在使用之前，請確保你的瀏覽器支持這個特性。