扇形菜單是一種常見的菜單形式，可以在網頁中實現良好的交互體驗。今天，我們將利用純 CSS 實現扇形菜單。

html {
font-size: 62.5%;
}
.menu-wrap {
width: 30rem;
height: 30rem;
position: relative;
margin: 8rem auto;
}
.menu-item {
position: absolute;
top: 0;
left: 0;
width: 30rem;
height: 30rem;
list-style-type: none;
transform-origin: 50% 50%;
}
.menu-item:nth-child(1) {
transform: rotate(0deg);
}
.menu-item:nth-child(2) {
transform: rotate(60deg);
}
.menu-item:nth-child(3) {
transform: rotate(120deg);
}
.menu-item:nth-child(4) {
transform: rotate(180deg);
}
.menu-item:nth-child(5) {
transform: rotate(240deg);
}
.menu-item:nth-child(6) {
transform: rotate(300deg);
}
.menu-item div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4rem;
height: 4rem;
background: #2c3e50;
border-radius: 50%;
text-align: center;
line-height: 4rem;
font-size: 2rem;
color: #fff;
}
.menu-item:hover div {
background: #e74c3c;
}

以上就是實現扇形菜單所需的 CSS 代碼，我們來分析一下：

首先，我們設置了整個菜單的大小和相對位置，使得它水平居中，并與上方留出一定的距離。接著，我們給每個菜單項設置了絕對定位，并利用 CSS3 中的 transform 屬性設置了不同的旋轉角度。在每個菜單項中，我們又設置了一個絕對定位的 div，用于顯示菜單項的圖標或文字。我們進一步調整這個 div 的位置和樣式，使其居中且具有一個鮮明的背景色。最后，我們在菜單項 hover 狀態下，改變 div 的背景色以提醒用戶其鼠標已經移至該菜單項上。

通過這些簡單的 CSS 設置，我們便實現了一個漂亮的扇形菜單。但是，在實際應用中，您需要根據項目需求進一步調整菜單項大小、數量以及樣式。希望這篇文章對您實現扇形菜單有所幫助！