利用css來製作小三角形樣式
阿新 • • 發佈：2022-04-12
1. 首先我們先準備一個盒子，讓盒子的寬高等於零，分別給定四個方向的邊框大小、實線、邊框顏色；讓邊框來充當內容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 .box1 { 11 width: 0; 12 height: 0; 13 margin: 0 auto; 14 border-top: 100px solid palegreen; 15 border-right: 100px solid peru; 16 border-bottom: 100px solid purple; 17 border-left: 100px solid pink; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div class="box1"></div> 24 </body> 25 26 </html>
得到的是這樣一個四個方向的三角形樣式：
2. 2. 擷取需要哪個方向的三角形，就保留需要擷取三角形的顏色，將其餘方向的邊框顏色設為透明色；
<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box2 { width: 0; height: 0; margin: 0 auto; /* 給定四個邊框大小、實線、這裡為了隱藏將邊款顏色設定為透明色 */ border: 100px solid transparent; /* 給需要留下的邊框給定邊框顏色，讓其顯示出來 */ border-top-color: palegreen; } </style> </head> <body> <div class="box2"></div> </body> </html>
保留上邊框的顏色，這樣我們就能得到三角形樣式了 ：
3. 總結
如何利用css來製作簡單的小三角形樣式，原理就是利用控制邊框的樣式來實現三角形的樣式。