css参考---纯css实现三角形
一、总结
一句话总结：
内容区的宽高设置为0，需要的部分设置是真实的颜色，不需要的部分设置成透明色transparent
.box{ width: 0; height: 0; border: 100px solid; border-left-color:red ; border-right-color:transparent ; border-top-color:red ; border-bottom-color:transparent ; }
二、纯css实现三角形
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯css实现三角形</title> 6 <style> 7 body{ 8 background-color: lightseagreen; 9 } 10 .box{ 11 width: 0; 12 height: 0; 13 14 border: 100px solid; 15 border-left-color:red ; 16 border-right-color:transparent ; 17 border-top-color:red ; 18 border-bottom-color:transparent ; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="box"></div> 24 </body> 25 </html>