css circle

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  border-radius: 50%;
5}
6

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}