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

[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>

个人简介

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

主目录

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