[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法

先画一个圆,外加两个绝对定位的半圆
扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现
这只能切出180°以内的扇形
超过180°的扇形,就把圆作为底色,两个遮罩作为扇形的组成部分不知道描述的好不好理解,但确实能实现任意角度的扇形了.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;}HTML代码<div class="contain"><div class="main"></div><div class="mask1 common"></div><div class="mask2 common"></div></div>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题