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>