css实现ol顺序排列指示牌导航牌效果代码-html代码-BFW代码库

css实现ol顺序排列指示牌导航牌效果代码

代码语言：html

代码描述：css实现ol顺序排列指示牌导航牌效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");
        
        *,
        *::before,
        *::after {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        
        body {
        	min-height: 100vh;
        	font-size: 20px;
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	align-items: center;
        	padding: 2em;
        	font-family: sans-serif;
        	background-color: #f0f0f0;
        }
        h1 {
        	margin-bottom: 1em;
        	text-align: center;
        }
        #dir-sign {
        	list-style-type: none;
        	counter-reset: step;
        	display: flex;
        	flex-direction: column;
        	gap: 1.5em;
        	position: relative;
        	padding-top: 2.5em;
        	padding-bottom: 7.5em;
        }
        #dir-sign::before {
        	content: "";
        	position: absolute;
        	width: 1.5em;
        	height: 100%;
        	border-radius: 1em 1em 0.25em 0.25em;
        	left: 50%;
        	top: 0;
        	transform: translateX(-50%);
        	background-color: rgb(134, 65, 19);
        	background-image: linear-gradient(
        		to right,
        		rgba(255, 255, 255, 0.25),
        		transparent 30%,
        		rgba(0, 0, 0, 0.25) 60% 80%,
        		transparent
        	);
        }
        #dir-sign::after {
        	content: "";
        	position: absolute;
        	width: 10em;
        	height: 1em;
        	background-image: radial-gradient(rgba(0, 0, 0, 1) 0em, rgba(0, 0,.........完整代码请登录后点击上方下载按钮下载查看