在網頁設計中，CSS 可以用來實現各種各樣的效果，其中一種比較有趣的效果就是讓圖片變成扇形。使用 CSS 實現這種效果非常簡單，下面的代碼將演示如何做到這一點。

/*定義圖片的樣式*/
img {
width: 200px;
height: 200px;
}
/*定義扇形的樣式*/
img:before {
content: '';
position: absolute;
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-left: 100px solid white;
border-bottom: 100px solid transparent;
transform: rotate(-45deg);
}
/*將圖片轉為扇形*/
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

在上面的代碼中，首先定義了圖片的樣式，包括寬度和高度。接著使用偽元素 `:before` 來定義扇形的樣式，通過 `border` 屬性來創建一個扇形，并使用 `rotate` 屬性將其旋轉。最后將圖片使用 `clip-path` 屬性轉為扇形即可。

上述代碼中 `polygon` 函數實現一個多邊形，它接受一組坐標作為參數，用于定義多邊形的每個頂點的位置。在這里，我們定義的多邊形由四個點組成，分別為 `(50%, 0%)`、`(100%, 50%)`、`(50%, 100%)`、`(0%, 50%)`。這些點的位置形成了一個正方形，通過 `clip-path` 屬性剪裁出了一個扇形，實現了將圖片轉為扇形的效果。