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

[haizhilin2013]

第76天 用CSS画出一个任意角度的扇形，可以写多种实现的方法

[liuxiaole]

四个半圆叠加，过半调整z-index：
https://codepen.io/liuxiaole-the-sasster/full/RzQBKV

[lu-xiansen]

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>

我也附个链接,直接改变两个mask样式里的度数即可
https://codepen.io/lu-xiansen/pen/mZXQbO

[zyronon]

2楼的方法很赞

[liuxiaole]

想到一个更加简单的方法，直接用 clip-path 切多边形，然后 border-radius 一裁剪就是扇形了！

https://codepen.io/liuxiaole-the-sasster/pen/Zdrmxg

[VilianLee]

用两个矩形叠加遮罩最底层的圆

[2256184693]

@liuxiaole 学到了学到了

[Konata9]

这一题其实和 Day33 画三角形的很类似，利用 border 就可以实现了。通过调整 border 的宽度来改变不角度。实现扇形就是再加一个 border-radius.

https://codepen.io/Konata9/pen/wLOLer?editors=1100

[liuxiaole]

这一题其实和 Day33 画三角形的很类似，利用 border 就可以实现了。通过调整 border 的宽度来改变不角度。实现扇形就是再加一个 border-radius.

https://codepen.io/Konata9/pen/wLOLer?editors=1100

你这样可以画任意角度？300度的扇形怎么画？

[hafrans]

对于这种场景基本上就要用canvas了。

[MrZ2019]

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>

我也附个链接,直接改变两个mask样式里的度数即可
https://codepen.io/lu-xiansen/pen/mZXQbO