border 实现三角形 

 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>
View Code

 

posted @ 2020-07-21 21:47  伟笑  阅读(122)  评论(0)    收藏  举报