html+CSS布局实例：用CSS绘制三角形

这是关于border元素的理解

原理：一个盒子的宽高为0时，由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图

当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。如图

   

三角形

.triangle{
            /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid #00a3af;
            border-left: 50px solid transparent;    
            /*transparent 表示透明*/
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;
        }

效果图：

只要上下左右中任意两个临近的边框设置颜色，其余边边框设置成透明的就行，

就是使用  transparent（把边框设置成透明）

例如：border-top: 50px solid transparent;

如果你不知道border怎么用,可以去   CSS 简写边框属性    学习一下

我多举几个例子，你可以去VSCode、IDEA、sts等等上去试一下就一目了然了

    
    
    
    


    
正方形
    
三角形
    
三角形
    
三角形
    
三角形

效果图：