網頁做三角形圖片，你還在拿ps調整嗎？out了，老鐵，來和我一起腦海暢想一個正方形是由4個等腰直角三角形構成，然後我想保留上邊的三角形，那下邊、左邊、右邊的三角形就沒了（設置背景色transparent或者與背景相近的顏色），最終結果就是一個保留上邊，方向朝下的三角形，需要註意一點的是設置的css樣... ...
網頁做三角形圖片，你還在拿ps調整嗎？out了，老鐵，來和我一起腦海暢想一個正方形是由4個等腰直角三角形構成，然後我想保留上邊的三角形，那下邊、左邊、右邊的三角形就沒了（設置背景色transparent或者與背景相近的顏色），最終結果就是一個保留上邊，方向朝下的三角形，需要註意一點的是設置的css樣式中width=0，如果不是就不能構成正方形，而是一個梯形；此外還可以通HTML實體里的三角形符號，朝上▲朝下▼朝左◄朝右►，最後通過font的大小顏色控制三角形！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>怎樣不用圖片來做一個三角形圖標</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /* .box1,.box2,.box3,.box4{ 13 font-size: 66px; 14 color: lightcoral; 15 cursor: pointer; 16 } *//*HTML實體里的三角形符號*/ 17 .box{ 18 width: 0px; 19 border-left: 100px solid red; 20 border-right: 100px solid yellow; 21 border-top: 100px solid green; 22 border-bottom: 100px solid #000; 23 }/*四個三角形構成一個正方形，想要哪個邊另外三邊transparent*/ 24 .box{ 25 width: 0px; 26 border-left: 100px solid transparent; 27 border-right: 100px solid transparent; 28 border-top: 100px solid red; 29 border-bottom: 100px solid transparent; 30 } 31 .triangle1{ 32 width: 0px; 33 border: 100px solid yellow; 34 border-top-color:transparent; 35 border-left-color: transparent; 36 border-right-color: transparent; 37 } 38 /*需要多大的三角形就設置相應像素的border值，然後將其中三個方向的邊框顏色設置為透明或者將邊框顏色設置為與背景相同的顏色即可*/ 39 </style> 40 </head> 41 <body> 42 <!-- 方法一 --> 43 <div class="box1">▲</div> 44 <div class="box2">▼</div> 45 <div class="box3">◄</div> 46 <div class="box4">►</div> 47 <!-- 方法二 --> 48 <div class="box"></div> 49 50 <div class="triangle1"></div> 51 </body> 52 </html>
如果想瞭解更多純CSS寫三角形-border法，建議參考下小平頭~ 與mumu42(後續有時間再補全該頁面border書寫三角形的方法)
