avatar

css早期练习 三角形与扇形

三角形

三角形

样式

1
2
3
4
5
6
7
8
9
10
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #00adb5 transparent;
}
</style>
<div class="triangle"></div>

等边三角形

样式

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
30
31
32
33
34
35
36
37
38
39
40
41
<style>
.fl {
float: left;
margin-left: 5px;
}
.triangle2 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 86.6px 50px;
border-color: transparent transparent #00adb5 transparent;
}

.triangle3 {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #00adb5;
}

.triangle4 {
width: 0;
height: 0;
border-style: solid;
border-width: 86.6px 50px 0 50px;
border-color: #00adb5 transparent transparent transparent;
}

.triangle5 {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 86.6px 50px 0;
border-color: transparent #00adb5 transparent transparent;
}
</style>
<div class="triangle2 fl"></div>
<div class="triangle3 fl"></div>
<div class="triangle4 fl"></div>
<div class="triangle5 fl"></div>

四个角度

样式

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
30
31
32
33
34
35
36
37
38
39
40
41
<style>
.fl {
float: left;
margin-left: 5px;
}
.triangle6 {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 0;
border-color: #00adb5 transparent transparent transparent;
}

.triangle7 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 0;
border-color: transparent #00adb5 transparent transparent;
}

.triangle8 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100px 100px;
border-color: transparent transparent #00adb5 transparent;
}

.triangle9 {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 0 100px;
border-color: transparent transparent transparent #00adb5;
}
</style>
<div class="triangle6 fl"></div>
<div class="triangle7 fl"></div>
<div class="triangle8 fl"></div>
<div class="triangle9 fl"></div>

扇形

第一种写法

1
2
3
4

<svg width="200" :height="200">
<path d="M 184.80 47.01 A 100 100 0 0 0 100.00 0.00 L 100 100 Z" fill="#00adb5"></path>
</svg>

第二种写法

1
2
3
4
5
6
7
8
9
10

<style>
.sector {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(transparent 0%, #00adb5 0% 16.67%, transparent 16.67%);
}
</style>
<div class="sector"></div>

第三种写法

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
30
31
32
33
34
35
36
<style>
.sector-container {
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: relative;
overflow: hidden;
}

.sector-container span {
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 0;
border-style: solid;
transform-origin: bottom center;
}

.sector-container span:nth-child(1) {
transform: translate(-50%, 0) rotate(15deg);
border-width: 100px 26.7949px 0 26.7949px;
border-color: #00adb5 transparent transparent transparent;
}

.sector-container span:nth-child(2) {
transform: translate(-50%, 0) rotate(45deg);
border-width: 100px 26.7949px 0 26.7949px;
border-color: #00adb5 transparent transparent transparent;
}
</style>
<div class="sector-container">
<span></span>
<span></span>
</div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/07/css-create-triangle-sector/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論