css3各种箭头

原创已于 2022-09-29 11:57:42 修改 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

于 2022-09-29 11:55:54 首次发布

这篇博客介绍了如何使用CSS3创建不同方向的箭头，包括向上、向下、向左和向右的箭头。通过调整边框的透明度和颜色，可以实现不同颜色和方向的箭头效果。

" <"

" >"

/* css3三角形（向上 ▲） /
p.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; / 右透明 */
border-right:5px solid transparent; /*右透明 /
border-bottom:5px solid #2f2f2f; / 定义底部颜色 /
font-size:0px;
line-height:0px;
}
/ css3三角形（向下 ▼） /
p.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/ css3三角形（向左） /
p.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; / left arrow slant /
border-top:5px solid transparent; / right arrow slant /
border-right:5px solid #2f2f2f; / bottom, add background color here /
font-size:0px;
line-height:0px;
}
/ css3三角形（向右） /
p.arrow-rightright {
width:0px;
height:0px;
border-bottom:5px solid transparent; / left arrow slant /
border-top:5px solid transparent; / right arrow slant /
border-left:5px solid #2f2f2f; / bottom, add background color here */
font-size:0px;
line-height:0px;
}