css绘制实心三角形

最新推荐文章于 2025-03-24 00:59:30 发布

hxf6060

最新推荐文章于 2025-03-24 00:59:30 发布

阅读量1k

点赞数

文章标签：三角形 css 绘制实心

本文链接：https://blog.youkuaiyun.com/hxf6060/article/details/89709581

版权

本文介绍了如何使用CSS通过调整边框颜色来创建实心三角形。通过将元素宽高设为0，并设定不同边框颜色，仅显示所需方向的边框，即可实现三角形的绘制。示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用css绘制三角形原理其实很简单，用到的是border-color，这个属性可以设置四条边框的颜色：

border-color:red green blue pink;

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色

我们来把一个盒子宽高都设置为0，只给边框：

html:

<i class="caret-con"></i>

css:

i{
    display: block;
    margin-top: 30px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
}
.caret-con{
    border-color: #f99 #333 #fca #f23;
}

效果如下：

所以我们绘制三角形只需要给一个方向的边框颜色就可以了。代码示例：

html:

<i class="caret-top"></i>
<i class="caret-left"></i>
<i class="caret-bottom"></i>
<i class="caret-right"></i>

css:

        .caret-top{
            border-color: transparent transparent #333 transparent;
        }
        .caret-left{
            border-color: transparent #333 transparent transparent;
        }
        .caret-bottom{
            border-color: #333 transparent transparent transparent;
        }
        .caret-right{
            border-color: transparent transparent transparent #333;
        }

效果如下：