# css画东西

# 画一个扇形

clip: rect(top,right,bottom,left)设置剪裁的形状

<div class="sector"></div>

.sector{
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background-color: deepskyblue;
    position: relative;
}
.sector::before{
    content: "";
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: white;
    border-radius: 200px;
    /*裁减半圆，再做旋转*/
    clip: rect(0px,100px,200px,0);
    transform: rotate(-60deg);
}
.sector::after{
    content: "";
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: white;
    border-radius: 200px;
    /*裁减半圆，再做旋转*/
    clip: rect(0px,200px,200px,100px);
    transform: rotate(60deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

利用overflow:hidden

<div id="demo">
    <div id="circle"></div>
</div>

1
2
3

#demo {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
}
#circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

border-radius

<div id="sector"></div>

 #sector {
    width: 0;
    height: 0;
    border: 100px solid;
    border-radius: 100px;
    border-color: orangered transparent transparent transparent;
}

1
2
3
4
5
6
7

← 一些常见api的实现手写一些Vue的代码 →