带三角形的导航栏样式 html css

最新推荐文章于 2022-06-24 21:37:53 发布

zzzzoey_

最新推荐文章于 2022-06-24 21:37:53 发布

阅读量668

点赞数

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

本文链接：https://blog.csdn.net/zzzzoe_/article/details/104238157

版权

本文介绍如何使用HTML和CSS构建一个带有向下三角形箭头的导航栏。通过CSS伪元素和边框技巧实现三角形，并详细解释了实现过程。

摘要由CSDN通过智能技术生成

效果图

代码：

<div class="row select_tab">
	<div class="col select ">1. 选择版本</div>
	<div class="col ">2. 经营信息</div>
	<div class="col ">3. 店铺信息</div>
	<div class="col ">4. 完成</div>
</div>

.row {
	margin: 0 auto;
	width: 1000px;
}

.select_tab {
	display: flex;
	margin-bottom: 20px;
}

.col {
	position: relative;
	width: 25%;
	height: 40px;
	line-height: 40px;
	text-align: center;

    /*添加左边距，即箭头白色处的间隔*/
	margin-left: 15px;
	background-color: rgb(248, 248, 248);
}


/*+号语法: 作用于第二个.col，把第一个元素的样式移除*/
.col+.col::before {
	position: absolute;
	content: "";
	top: 0;
	left: -10px;

   /*