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实现三角形

博客对应课程的视频位置：

 

css参考---纯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>

​