css绘画扇形

css中绘画半圆形：

<div class="semi-sector"></div> .semi-sector { height: 50px; width: 100px; border-radius: 50px 50px 0 0; /* border-radius 要等于圆的半径*/ background-color: red; }

css绘画任意角度的扇形：

思路： 先画一个圆，然后再用 absolute 绝对布局画两个半圆，然后 rotate 旋转两个半圆，注意使用 transform-origin 设置好圆心。

<div class="circle"></div> <div class="sector1"></div> <div class="sector2"></div> body { margin: 0; } .circle { width: 100px; height: 100px; border-radius: 100px; background-color: red; } .sector1 { transform-origin: 50px 50px; transform: rotate(90deg); position: absolute; top: 0px; left: 0px; width: 100px; height: 50px; background-color: white; border-radius: 50px 50px 0 0; } .sector2 { transform-origin: 50px 50px; transform: rotate(120deg); position: absolute; top: 0px; left: 0px; width: 100px; height: 50px; background-color: white; border-radius: 50px 50px 0 0; }