css畫扇形按鈕

最近專案中需要製作乙個扇形按鈕，效果是這樣的：

屬性，完美實現。

對作者表示感謝。 

clip，剪裁影象，

（來自w3school：

）我的偶像張鑫旭早在2023年就寫過關於

clip

的博文，

，好了，說到我要實現的這個扇形按鈕組，

首先最外面肯定有乙個圓形：

然後，再畫乙個圓形，設成絕對定位，並加上背景色：

接著，進行裁剪，把右邊、下邊全部裁掉，只留下左上角，clip: rect(0px, 100px, 100px, 0px);

再旋轉一下角度，轉45度就好：

如此這般，再畫三個圓，進行同樣的裁剪，只是旋轉的角度不同。就會得到四塊「蛋糕」 ：

最後再往中間貼一塊小圓：

成功啦！

調整成效果圖中的顏色，並加上邊框，調整細節，注意裁剪的數值為99，比原來少了一畫素，這樣互相之間就有個小空隙，更好看，顯得更高極。

最後附上**：

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style
>
7body
8.sector
9.sector .box
10.sector .box,
11.sector .center
12.sector .box:hover,
13.sector .center:hover
14.sector .s1
15.sector .s2
16.sector .s3
17.sector .s4
18.sector .center
19style
>
20head
>
21<
body
>
22<
div 
class
="sector"
>
23<
div 
class
="box s1"
>
div>
24<
div 
class
="box s2"
>
div>
25<
div 
class
="box s3"
>
div>
26<
div 
class
="box s4"
>
div>
27<
div 
class
="center"
>
div>
28div
>
29body
>
30html
>

drawArc 畫扇形 畫弧線

設定漸變色 這個正方形的顏色是改變的 shader mshader new lineargradient 0,0,100,100,new int null,shader.tilemode.repeat 乙個材質,打造出乙個線性梯度沿著一條線。p.setshader mshader rectf rec...

CSS 畫三角 扇形 圓形

元素為矩形，而它的每個border為乙個等腰梯形，上底為的width height，高為border的粗細。把四邊的上底設為0，即width 0，height 0 時，梯形就變成三角形了。dividerect 接著把四面的border中的兩條border變成transparent 透明，一條不定義，...

css 使用css3畫乙個扇形

四個半圓疊加，過半調整 z index container div fan 1,fan 3 fan 2,fan 4 fan 1,fan 2 fan 3,fan 4 fan 4 fan 2 fan 3 keyframes zindex 50 50.000001 to keyframes rotate ...