[css] 使用css3畫一個扇形

四個半圓疊加，過半調整 z-index

.container {
width: 200px;
height: 200px;
position: relative;
border-radius: 100%;
}

div {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

.fan-1,
.fan-3 {
background: #CC9999;
}

.fan-2,
.fan-4 {
background: white;
}

.fan-1,
.fan-2 {
border-radius: 100px 0 0 100px;
transform-origin: 100% 50%;
z-index: 2;
}

.fan-3,
.fan-4 {
z-index: 1;
left: 50%;
border-radius: 0 100px 100px 0;
transform-origin: 0% 50%;
}

.fan-4 {
animation: rotate-2 2s linear both infinite;
}

.fan-2 {
animation: rotate-1 2s linear both infinite;
}

.fan-3 {
animation: zIndex 2s linear both infinite;
}

@keyframes zIndex {
from {
z-index: 1;
}

50% {
z-index: 1;
}

50.000001% {
z-index: 2;
}

to {
z-index: 2;
}
}

@keyframes rotate-1 {
from {
transform: rotate(0);
}

50% {
transform: rotate(0);
}

to {
transform: rotate(180deg);
}
}

@keyframes rotate-2 {
from {
transform: rotate(0);
}

50% {
transform: rotate(180deg);
}

to {
transform: rotate(180deg);
}
}

clip-path 切多邊形， border-radius 裁剪

1 .sector { display: inline-block; margin: 20px; background: #CC9999; width: 100px; height: 100px; border-radius: 100%; animation: sector 4s linear both infinite; transform: rotate(45deg); }

@keyframes sector{
from {
clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
}
25% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
25.000001% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
}
50%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
}
50.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
}
75%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
75.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}
to{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}
}

靜態：
先畫一個圓，外加兩個絕對定位的半圓
扇形可以通過兩個半圓作為遮罩旋轉來露出相應的角度實現
這只能切出180°以內的扇形
超過180°的扇形，就把圓作為底色，兩個遮罩作為扇形的組成部分

想獲得不同度數的扇形，改變 mask 樣式里的度數即可。

1 2 3 4 5 .contain { position: relative; width: 200px; height: 200px; } .main { height: 100%; background: lightgreen; border-radius: 100px; } .common { position: absolute; top: 0; width: 50%; height: 100%; } .mask1 { transform: rotate(83deg); border-radius: 100px 0 0 100px; left: 0; transform-origin: right center; background: red; } .mask2 { transform: rotate(-76deg); transform-origin: left center; left: 100px; border-radius: 0 100px 100px 0; background: blue; } # 個人簡介 我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易， 但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 使用css3画一个扇形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。