css箭头

最新推荐文章于 2024-06-22 09:56:05 发布

喵闲生

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量388

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43884284/article/details/89537344

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先看效果图

HTML

<div class="process">
	<span class="arrow_box">第一步</span>
	<span class="arrow"></span>
	<span class="arrow_box">第二步</span>
	<span class="arrow"></span>
	<span class="arrow_box">第三步</span>
	<span class="arrow"></span>
	<span class="arrow_box">第四步</span>
	<span class="arrow"></span>
	<span class="arrow_box">第五步</span>
	<span class="arrow"></span>
	<span class="arrow_box">第六步</span>
</div>

CSS

.process .arrow_box{width: 145px;height: 52px;padding: 20px 10px;display: inline-block;border: 1px solid #ff514e;border-radius: 18px;text-align: center;font-size: 20px;font-weight: bold;color: rgb(255, 79, 79);vertical-align: middle;}
/* 伪类添加箭头 */
.arrow {position: relative;border: 1px solid #ff514e;display: inline-block;width: 30px;}
.arrow:before {left: 80%;top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 81, 78, 0);border-left-color: #ff514e;border-width: 9px;margin-top: -9px;}

附加一个很好的伪类三角形代码工具：http://www.cssarrowplease.com/