css绘制各种图形
心形
<div class="heart"></div>
1
1.绘制正方形
.heart {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
2.利用伪元素绘制两个圆形
两个圆形的圆心分别在正方形的上边和右边中点
.heart:before {
position: absolute;
top: -50px;
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgreen;
}
.heart:after {
position: absolute;
left: 50px;
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
background: lightblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3.将第一步的正方形旋转45度角
.heart {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
三个图形背景色都改为红色就完成啦~, 在线预览地址：https://codepen.io/my729/pen/gJXqLN
八卦图
<div class="bagua">
<div class="top"></div>
<div class="bottom"></div>
</div>
1
2
3
4
2
3
4
1.绘制圆形，并使用渐变填充左右黑白色，
.bagua {
position: relative;
top: 100px;
left: 100px;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid #000;
background: -webkit-linear-gradient(left, black 50%, white 50%);
background: -o-linear-gradient(left, black 50%, white 50%);
background: -moz-linear-gradient(left, black 50%, white 50%);
background: linear-gradient(left, black 50%, white 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
2. 在上述圆中绘制两个小圆，分别填充黑白两色
.top {
position: relative;
left: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
}
.bottom {
position: relative;
left: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3. 利用伪元素在两个小圆中绘制圆心，填充黑白两色
.top:before {
position: absolute;
content: "";
top: 30px;
left: 30px;
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.bottom:before {
position: absolute;
content: "";
top: 30px;
left: 30px;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
完成，在线预览地址：https://codepen.io/my729/pen/PvOVMN
圆内分割图
<div class="shap"></div>
1
.shap {
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
border-radius: 50%;
border: 50px solid transparent;
border-top-color: black;
border-bottom-color: black
}
.shap:before {
position: absolute;
content: "";
top: -50px;
left: -50px;
width: 99px;
height: 99px;
border-radius: 50%;
border: 1px solid black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21