CSS3中使用

<polygon>

標(biāo)簽可以繪制任意多邊形，我們可以利用它繪制出一個(gè)圓形。下面是實(shí)現(xiàn)方法：

1. 首先，我們需要指定一個(gè)適當(dāng)?shù)娜萜?，比如?pre><div>標(biāo)簽包裹起來(lái)：

<div class="circle"> ... </div>

2. 接著，我們需要添加 CSS 樣式來(lái)定義

<polygon>

標(biāo)簽的屬性，可以利用

transform: rotate(...)

將多邊形旋轉(zhuǎn)一定的角度，這樣我們可以繪出一個(gè)正多邊形：

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
clip-path: polygon(
50% 0%,
63% 38%,
100% 38%,
69% 59%,
82% 100%,
50% 75%,
18% 100%,
31% 59%,
0% 38%,
37% 38%
);
}

3. 最后，我們將容器的圓角半徑設(shè)置為50%即可，這樣就能將正多邊形變?yōu)閳A形了。完整的代碼如下：

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
clip-path: polygon(
50% 0%,
63% 38%,
100% 38%,
69% 59%,
82% 100%,
50% 75%,
18% 100%,
31% 59%,
0% 38%,
37% 38%
);
}

這樣我們就成功地利用 CSS 技術(shù)將一個(gè)正多邊形變成了圓形。