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,.........完整代码请登录后点击上方下载按钮下载查看