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

一、实心三角形

1、代码

　　　　.div-angles{

            width:;

            height:;

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

二、空心三角形

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

参考文章：

巴特西

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

最新文章

热门文章