1
2 #circle {
3 width: 100px;
4 height: 100px;
5 background: red;
6 border-radius: 50%
7 }
8
1.arrow-up {
2 width: 0;
3 height: 0;
4 border-left: 5px solid transparent;
5 border-right: 5px solid transparent;
6
7 border-bottom: 5px solid black;
8}
9
10.arrow-down {
11 width: 0;
12 height: 0;
13 border-left: 20px solid transparent;
14 border-right: 20px solid transparent;
15
16 border-top: 20px solid #f00;
17}
18
19.arrow-right {
20 width: 0;
21 height: 0;
22 border-top: 60px solid transparent;
23 border-bottom: 60px solid transparent;
24
25 border-left: 60px solid green;
26}
27
28.arrow-left {
29 width: 0;
30 height: 0;
31 border-top: 10px solid transparent;
32 border-bottom: 10px solid transparent;
33
34 border-right:10px solid blue;
35}
1#circle {
2 width: 100px;
3 height: 100px;
4 background: red;
5 border-radius: 50%
6}
7
1#circle {
2 width: 100px;
3 height: 100px;
4 background: red;
5 border-radius: 50%
6}
1<div id="circle">
2</div>
3
4#circle {
5 width: 100px;
6 height: 100px;
7 background: red;
8 border-radius: 50%
9}