微信扫一扫打赏支持

css参考---纯css实现三角形

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>

 

 

 

 

 

 
posted @ 2020-03-19 18:43  范仁义  阅读(120)  评论(0)  编辑  收藏  举报