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.triangle{
2 border-left: 5px solid transparent;
3 border-right: 5px solid transparent;
4 border-bottom: 5px solid red;
5 border-width:100px;
6}
1// css clip
2<div id="triangle"></div>
3
4#triangle {
5 background-color: #003BDE;
6 clip-path: polygon(50% 0, 100% 100%, 0 100%);
7 width: 100px;
8 height: 100px;
9}
1#triangle {
2 width: 0;
3 height: 0;
4 border-left: 18px solid transparent;
5 border-right: 18px solid transparent;
6 border-bottom: 30px solid blue;
7}
1<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8 />
5 <title>Draw a circle</title>
6 </head>
7 <body onload="draw();">
8 <canvas id="circle" width="150" height="150"></canvas>
9 </body>
10 </html>