纯css（无图片）实现带边框三角指示图标

最新推荐文章于 2023-01-06 16:03:46 发布

众乐-Ryan

最新推荐文章于 2023-01-06 16:03:46 发布

阅读量2.3k

点赞数

分类专栏： web前端 css 文章标签：前端 css

本文链接：https://blog.csdn.net/fendouzhe123/article/details/38024259

版权

web前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

我们在平常的开发过程中经常碰到需要一个三角的指示小图标，一般的做法是使用图片来做，快速方便。在土豆网看视频的时候发现他们也用到了这种效果，看了下他们的源码，完全是用css来实现。记录一下。

代码如下：

<style type="text/css">
	i.caret{
		display: block;
		border-color: transparent transparent #DDD;
		border-style: dashed dashed solid;
		border-width: 0 9px 9px;
		width: 0;
		height: 0;
		line-height: 0;
		position: absolute;
	}
	i.caret i{
		border-color: transparent transparent #f4f3f3;
		border-style: dashed dashed solid;
		border-width: 0 7px 7px;
		width: 0;
		height: 0;
		line-height: 0;
		position: absolute;
		left: -7px;
		top: 2px;
		z-index: 2;
		
	}
	
</style>
<i class="caret">
	<i></i>
</i>

当然，这个实现只是箭头向上，其他方向的指向也可以类似实现。比如朝左：

<style type="text/css">
.arrow{
display: block;
    border-color: transparent #444a52 transparent;
    border-style: dashed dashed solid;
    border-width: 9px 9px 9px 0;
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
}
</style>
<i class="arrow"></i>

其中的规律可以自寻发现。