Css 画出一个扇形，附代码 _Css

文章插图

<div class="sector"></div>

.sector{width: 200px;height: 200px;border-radius: 200px;background-color: deepskyblue;position: relative;}.sector::before{content: "";width: 200px;height: 200px;position: absolute;background-color: white;border-radius: 200px;/*裁减半圆，再做旋转*/clip: rect(0px,100px,200px,0);transform: rotate(-60deg);}.sector::after{content: "";width: 200px;height: 200px;position: absolute;background-color: white;border-radius: 200px;/*裁减半圆，再做旋转*/clip: rect(0px,200px,200px,100px);transform: rotate(60deg);}

方式二

<><style>#demo {position: relative;width: 50px;height: 50px;overflow: hidden;}#circle {position: absolute;width: 100px;height: 100px;background-color: black;border-radius: 50%;}</style><body><div id="demo"><div id="circle"></div></div></body></>

方式三

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css画出一个扇形</title><style>#sector {width: 0;height: 0;border: 100px solid;border-radius: 100px;border-color: orangered transparent transparent transparent;}</style></head><body><div id="sector"></div></body></html>

【Css 画出一个扇形，附代码】