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, 0, 0) 1.5em),
                        radial-gradient(rgba(0, 0, 0, 0.5) 1em, rgba(0, 0, 0, 0) 70%);
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 50%);
                border-radius: 50%;
                z-index: -1;
        }
        
        #dir-sign li {
                display: flex;
                align-items: center;
                background: var(--signColor);
                background-image: var(--woodTexture);
                background-size: cover;
                color: var(--textColor);
                counter-increment: step;
                position: relative;
                --shadow: drop-shadow(0.025em 0.025em 0.05em rgba(0, 0, 0, 0.5));
        }
        
        #dir-sign li:nth-child(odd) {
                padding: 0.5em 1.5em 0.5em 2em;
                clip-path: polygon(
                        2em 0,
                        100% 0,
                        calc(100% - 1em) 50%,
                        100% 100%,
                        2em 100%,
                        0 50%
                );
                left: 50%;
                transform: translateX(-100%) translateX(5em);
                align-self: flex-start;
                text-align: right;
        }
        
        #dir-sign li:nth-child(even) {
                padding: 0.5em 2em 0.5em 1.5em;
                flex-direction: row-reverse;
                clip-path: polygon(
                        0 0,
                        calc(100% - 2em) 0,
                        100% 50%,
                        calc(100% - 2em) 100%,
                        0 100%,
                        1em 50%
                );
                right: 50%;
                transform: translateX(100%) translateX(-5em);
                align-self: flex-end;
        }
        
        #dir-sign li > * {
                filter: var(--shadow);
        }
        #dir-sign li::after {
                content: "0" counter(step);
                width: 2em;
                height: 2em;
                border: 0.05em solid var(--textColor);
                border-radius: 50%;
                display: grid;
    .........完整代码请登录后点击上方下载按钮下载查看