1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>css实现三角形</title>
6 </head>
7 <body>
8 <div class="box"></div>
9
10 <div class="arrow">
11 <span class="arrow arrow2"></span>
12 </div>
13 </body>
14
15 <style type="text/css">
16 /*利用border 实现三角形*/
17 .box {
18 width: 0;
19 height: 0;
20 border-top: 100px solid black;
21 /*border-bottom: 0 solid transparent;*/
22 border-left: 100px solid transparent;
23 border-right: 100px solid transparent;
24 /*居中*/
25 position: absolute;
26 left: 50%;
27 transform: translateX(-50%);
28 }
29 /*进而利用俩三角形重叠来实现返回的箭头*/
30 .arrow{
31 position: absolute;
32 top: 22px;
33 left: 0;
34 border: 60px solid transparent;
35 border-right-color: #000;
36 }
37 .arrow2{
38 border-right-color: #fff;
39 left: -50px;
40 top: -60px;
41 }
42
43 </style>
44 </html>
