css3 实现边框加小三角

最新推荐文章于 2023-11-22 12:00:24 发布

sam80000

最新推荐文章于 2023-11-22 12:00:24 发布

阅读量723

点赞数

分类专栏：前端知识点文章标签： css

本文链接：https://blog.csdn.net/sam80000/article/details/110545915

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

鼠标放入后显示边框有小三角（利用图片）

构建思路：
1.利用双伪类，实现放入鼠标同时添加图片的样式
2.导入背景图片，添加图片宽高，调整放置的位置。需要给本标签添加定位position:relative，给本标签伪类的样式添加position：absolute.

#projectList .projectList_btns li:hover::after{color: white; background: url(img/arrow.png) no-repeat; content: ""; position: absolute; display: block;width: 11px; height: 6px;bottom: -6px; left: 50%;margin-left: -6px;}
#projectList .projectList_btns li:hover{background:#018FFB;}