css 下三角 空心

CSS下三角实现方法有很多种，但是如何让它变为空心呢？下面我们将介绍一种简单的实现方式。

    .triangle {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #000;
            border-bottom: 0;
    }
    

上面的代码使用了三条边框，使得下面的部分不显示，从而实现空心的下三角效果。其中，border-left和border-right设置为透明的实质就是去掉了下三角的左右两侧。

注：该效果只适用于单色背景，如果需要在多色背景下使用，需要使用linear-gradient等方式来实现渐变色效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！