steps样式 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mystep {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0;
				margin: 0;
			}

			.mystep li {
				list-style: none;
				background: #DCEEFE;
				color: #1E9FFF;
				line-height: 40px;
				text-align: center;
				position: relative;
				width: 100%;
				margin: 0 3px;
			}

			.mystep li:after {
				content: '';
				display: block;
				border-top: 20px solid #DCEEFE;
				border-bottom: 20px solid #DCEEFE;
				border-left: 20px solid #fff;
				position: absolute;
				right: -20px;
				top: 0;
			}

			.mystep li:after {
				content: '';
				display: block;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid #DCEEFE;
				position: absolute;
				right: -20px;
				top: 0;
				z-index: 1;
			}

			.mystep li:before {
				content: '';
				display: block;
				border-top: 20px solid #DCEEFE;
				border-bottom: 20px solid #DCEEFE;
				border-left: 20px solid #fff;
				position: absolute;
				left: 0px;
				top: 0;
			}

			.mystep li:first-child {
				border-radius: 4px 0 0 4px;
				padding-left: 25px;
			}

			.mystep li:last-child {
				border-radius: 0px 4px 4px 0px;
			}

			.mystep li:last-child:after,
			.mystep li:first-child:before {
				display: none;
			}

			.mystep li.active {
				background: #1E9FFF;
				color: #fff;
			}

			.mystep li.active:after {
				border-left-color: #1E9FFF;
			}

			.mystep li.active:before {
				border-top: 20px solid #1E9FFF;
				border-bottom: 20px solid #1E9FFF;
			}
		</style>
	</head>
	<body>
		<ul class="mystep">
			<li class="active">第一步</li>
			<li class="active">第二步</li>
			<li>第三步</li>
		</ul>
	</body>
</html>
posted @ 2021-08-26 17:19  橙云生  阅读(97)  评论(0)  编辑  收藏  举报