css3实现三角形，这一篇就够了

yamdork93

已于 2022-03-14 11:48:49 修改

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

文章标签： css3 css html

于 2017-05-05 11:41:50 首次发布

本文链接：https://blog.youkuaiyun.com/yamdork93/article/details/71194525

本文介绍如何使用CSS绘制一个简单的向下指向的红色等边三角形箭头，通过设置边框颜色和透明度来实现。

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

总结：朝向哪个方向，对边为三角形添加需要颜色，其他三边设为透明（简单）。

向下：


.arrow-down {
            width: 0px;
            height: 0px;
            border-top: 10px solid red;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;

        }

实现如图底边长20px，高10px等边三角形