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

Created on 30 Jun 2019 · 9Comments · Source: haizlin/fe-interview

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

css

Source

haizhilin2013

Most helpful comment

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

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

liuxiaole on 1 Jul 2019

👍14

All 9 comments

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

liuxiaole on 1 Jul 2019

👍6 👀1

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