纯 CSS 实现实心三角形和空心三角形

一、实心三角形

1、代码

    .div-angles{
            width: 0;
            height: 0;
            border-style: solid;
            border-width:30px;
            border-color: transparent transparent #06c transparent;
        }
        .right{
            border-color: transparent transparent transparent #06c ;
        }
        .bottom{
            border-color: #06c transparent transparent ;
        }
        .left{
            border-color: transparent #06c transparent transparent;
        }
<div class="div-angles"></div>
<div class="div-angles right"></div>
<div class="div-angles bottom"></div>
<div class="div-angles left"></div>

2、效果

3、原理

宽为0,高为0,三角形有多高,border值就有多大。然后其他三边透明。

二、空心三角形

原理:后面绝对定位一个三角形

参考文章:

原文地址:https://www.cnblogs.com/candy-Yao/p/9719098.html