css 实现箭头步骤条 

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.main {
			width: 90%;
			margin: 50px auto;
		}

		.step-item {
			width: 15%;
			float: left;
			position: relative;
			padding: 5px 0 5px 8px;
			line-height: 20px;
			background: #000;
			text-align: center;
			font-size: 14px;
			color: #fff;
			margin-right: 8px
		}

		.step-item::before {
			content: ' ';
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 15px 0 15px 10px;
			border-color: transparent transparent transparent #000;
			position: absolute;
			top: 0;
			left: 0;
			border-left-color: #fff;
			z-index: 1;
		}

		.step-item::after {
			content: ' ';
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 15px 0 15px 10px;
			border-color: transparent transparent transparent #000;
			position: absolute;
			top: 0;
			right: -10px;
			z-index: 2;
		}

		.step-item:hover {
			background: #1565c0;
		}

		.step-item:hover:after {
			border-left-color: #1565c0;
		}
	</style>
</head>

<body>

	<div class="main">
		<div class="step-item">
			需求讨论
		</div>
		<div class="step-item">
			产品设计
		</div>
		<div class="step-item">
			开发制作
		</div>
		<div class="step-item">
			功能测试
		</div>
		<div class="step-item">
			最终阶段
		</div>
	</div>
</body>

</html>

　　

 

posted @ 2022-12-27 11:56  热爱前端的5号机器  阅读(175)  评论(0)    收藏  举报