border 實現三角形
阿新 • • 發佈：2020-07-21
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"></View Codespan> 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>