纯CSS绘制的三角形箭头图案

最新推荐文章于 2025-05-09 11:47:55 发布

原创最新推荐文章于 2025-05-09 11:47:55 发布 · 328 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文通过四个不同方向的div元素展示了如何使用纯CSS来绘制向上、向下、向左及向右的三角形。每个div通过设置宽度、高度为0，并利用边框颜色差异实现特定方向的三角形效果。

div#up {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid#2f2f2f;
}
div#down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solidtransparent;
border-top: 20px solid #f00;
}
div#left {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solidyellow;
}
div#right {
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}

html:
<div id="up"></div>
<div id="down"></div>
<div id="left"></div>
<div id="right"></div>