CSS3疑难问题---8、纯css实现三角形

一、总结

一句话总结：

纯css实现三角形：原理是通过边框来实现三角形：将内容区的宽高设置为0，然后将需要的部分设置为真实的颜色，不需要的部分设置为透明色transparent

.box{
     0;
    height: 0;

    border: 200px solid;
    border-left-color: transparent;
    border-right-color: green;
    border-top-color: green;
    border-bottom-color: transparent;
}

二、纯css实现三角形

博客对应课程的视频位置：8、纯css实现三角形
https://www.fanrenyi.com/video/13/180

 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: blueviolet;*/
 9         }
10         .box{
11             width: 0;
12             height: 0;
13 
14             border: 200px solid;
15             border-left-color: transparent;
16             border-right-color: green;
17             border-top-color: green;
18             border-bottom-color: transparent;
19         }
20     </style>
21 </head>
22 <!--
23 将内容区的宽高设置为0，然后将需要的部分设置为真实的颜色，
24 不需要的部分设置为透明色transparent
25 
26 -->
27 <body>
28 <div class="box"></div>
29 </body>
30 </html>