如何用 CSS 实现一个三角形?首先熟悉一下边框的属性：边框宽度：border-width：10px; 边框颜色：bo

首先熟悉一下边框的属性：

边框宽度：border-width：10px;

边框颜色：border-color：pink;

边框样式：border-style：solid;

边框复写属性：border: 10px solid red;

左边框复写属性：border-left：10px solid green;

左边框样式：border-left-style: dashed;

左边框颜色：border-left-color：skyblue;

左边框宽度：border-left-width:20px;

其中，边框样式的常见属性值有： solid(实线) dashed（波浪线） dotted（点线） double（双线）

1.准备一个盒子，宽高都设置为0，给一个 50px 有颜色的边框

<style>
        .box   {
            width: 0;
            height: 0;
            border:50px solid skyblue;
        }
        
</style>

<body>
    <div class="box"></div>
</body>

2.如图所示，竟然出现了一个长 100px 宽100px 的正方形

3.我们试着给每条边框设置不一样的颜色

<style>
        .box   {
            width: 0;
            height: 0;
            border:50px solid skyblue;
            border-left-color: pink;
            border-right-color: red;
            border-bottom-color: greenyellow;
        }

    </style>

4.查看效果，出现了四个三角形，还挺好看

5.灵感一现，把其他四条边设置为透明，不就得到一个直角三角形了吗

<style>
        .box   {
            width: 0;
            height: 0;
            border:50px solid transparent;
            border-left-color: pink;
        }

    </style>

6.所以，先统一设置 border:50px solid transparent; 想要那个三角形，单独给哪边设置一个颜色即可

7.可以根据设置不同的 border-width 来改变三角形，或者形成多边形