CSS实现三角形

空心三角形

元素有宽高时，设置边框并添加颜色，然后通过将相邻两个边透明来实现。

        .box {
            width: 50px;
            height: 50px;
            border: 5px solid red;
            /* 底边透明 */
            border-bottom-color: transparent;
            /* 左边透明 */
            border-left-color: transparent;
        }
        
        <div class="box"></div>

效果图：

实心三角形

元素有宽高为零时，设置边框并添加颜色，然后通过将相邻两个边透明来实现。

        .box {
            width: 0;
            height: 0;
            border: 50px solid red;
            /* 底边透明 */
            border-bottom-color: transparent;
            /* 左边透明 */
            border-left-color: transparent;
        }
        
        <div class="box"></div>

效果图：