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边框线的宽度去控制