扇形菜單是一種非常炫酷的導航菜單，它的布局非常適合移動設備上的操作。下面就讓我們來學習一下如何用 CSS 實現一個扇形菜單：

.menu {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.menu a {
position: absolute;
display: block;
width: 100%;
height: 100%;
transform-origin: bottom left;
}
.menu a:nth-child(1) {
transform: rotate(-45deg);
}
.menu a:nth-child(2) {
transform: rotate(0deg);
}
.menu a:nth-child(3) {
transform: rotate(45deg);
}
.menu a:nth-child(4) {
transform: rotate(90deg);
}
.menu a:nth-child(5) {
transform: rotate(135deg);
}
.menu a:nth-child(6) {
transform: rotate(180deg);
}
.menu a:nth-child(7) {
transform: rotate(225deg);
}
.menu a:nth-child(8) {
transform: rotate(270deg);
}
.menu a:nth-child(9) {
transform: rotate(315deg);
}

代碼解釋：

首先，我們創建了一個名為 .menu 的容器，它應該具有相同的寬度和高度，并應該具有一個圓形邊緣，即 border-radius: 50%；

接下來，我們使用絕對定位將連接點的超鏈接放置在容器中。為了使它們集中在圓的底部和左側，我們將它們的 transform-origin 設置為 bottom left。然后，我們使用 nth-child 選擇器和 transform 屬性來將它們旋轉到正確的位置。