纯 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值就有多大。然后其他三边透明。

二、空心三角形

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

 

参考文章：