1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .triangle{ 8 width: 0px; 9 height: 0px; 10 border-width: 100px; 11 border-style: solid; 12 border-color: red green blue yellow; 13 } 14 .triangle{ 15 width: 0px; 16 height: 0px; 17 border-width: 60px; 18 border-style: solid; 19 border-color: transparent transparent red transparent; 20 transform: rotate(180deg); 21 margin-left: 80px; 22 } 23 .box{ 24 width: 400px; 25 height: 400px; 26 background-color: red; 27 border-radius: 80px; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 </div> 34 <div class="triangle"></div> 35 </body> 36 </html>
border制作三角形的原理總結:
- 利用border的3個屬性:border-width/border-style/border-color去實作;
- 寬度和高度要為0,實作一個由4個小三角形構成的正方形；
- 要啥方向的三角形,只需要保留這個方向的顏色值,其余方向的顏色值設為透明即可,畫出三角形然后旋轉即可;
- 三角形的大小由border-width邊框線的寬度去控制
- 三角形的顏色由border-color邊框線的寬度去控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/194171.html
標籤：Html/Css