Question

正如您在下面运行代码段时所看到的那样，＆＃34;外部＆＃34;目前包含5个较小箭头的箭头看起来不是很小的一次。

我知道这是我必须修改的界限，但无论我做什么，我都无法达到预期的效果。

background: linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0px 0/20px 51% no-repeat;

风格，我想要＆＃34;外部＆＃34;箭头看起来像最后一个箭头。正如你可以看到＆＃34;外部＆＃34;的开始和结束箭头不是那个＆＃34;尖尖的＆＃34;

＆＃13;

.phases {
        width: 1000px;
    }

    .breadcrumb {
        list-style: none;
        overflow: hidden;
        font: 18px Sans-Serif;
        margin: 0;
        padding: 32px 0;
    }

        .breadcrumb li {
            float: left;
            margin-right: -15px;
        }

            .breadcrumb li:first-child {
                margin-left: -20px;
            }

            .breadcrumb li a {
                color: white;
                text-decoration: none;
                padding: 20px 40px;
                --c: #004c89;
                background: linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
                position: relative;
                float: left;
            }

                .breadcrumb li a:hover {
                    --c: #0078d7;
                }

    .breadcrumb_wrapper {
        margin-left: 42px;
        position: relative;
    }

        .breadcrumb_wrapper:before {
            content: "";
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: -32px;
            right: 0;
            --c:#e0dad7;
            background: linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0px 0/20px 51% no-repeat;
        }

        .breadcrumb_wrapper .breadcrumb {
            padding: 0;
            margin-bottom: 30px;
        }

        .breadcrumb_wrapper span {
            color: white;
            display: block;
            position: relative;
            text-align: center;
            padding: 5px 0;
        }

        .breadcrumb_wrapper ul li:last-child {
            margin-right: 20px;
        }

    .firsta {
        margin-top: 29px;
    }

＆＃13;

<div class="phases">
    <ul class="breadcrumb">
        <li><a href="Pre-project.aspx" class="firsta">Pre-project</a></li>
        <li class="breadcrumb_wrapper">
            <span>Implementation project</span>
            <ul class="breadcrumb">
                <li><a href="Analysis.aspx">Analysis</a></li>
                <li><a href="Design.aspx">Design</a></li>
                <li><a href="Development.aspx">Development</a></li>
                <li><a href="Implementation.aspx">Implementation</a></li>
                <li><a href="Operation.aspx">Operation</a></li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

Answer 1

.phases {
        width: 1000px;
    }

    .breadcrumb {
        list-style: none;
        overflow: hidden;
        font: 18px Sans-Serif;
        margin: 0 0 0 7px;
        padding: 32px 0;
    }

        .breadcrumb li {
            float: left;
            margin-right: -15px;
        }

            .breadcrumb li:first-child {
                margin-left: -20px;
            }

            .breadcrumb li a {
                color: white;
                text-decoration: none;
                padding: 20px 40px;
                --c: #004c89;
                background: linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
                position: relative;
                float: left;
            }

                .breadcrumb li a:hover {
                    --c: #0078d7;
                }

    .breadcrumb_wrapper {
        margin-left: 50px;
        position: relative;
    }

        .breadcrumb_wrapper:before {
            content: "";
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: -32px;
            right: 0;
            --c:#e0dad7;
            background: linear-gradient(var(--c), var(--c)) 30px 0 /calc(100% - 62px) 100% no-repeat, linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/32px 51% no-repeat, linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/32px 51% no-repeat, linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/32px 51% no-repeat, linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0px 0/32px 51% no-repeat;
        }

        .breadcrumb_wrapper .breadcrumb {
            padding: 0;
            margin-bottom: 30px;
        }

        .breadcrumb_wrapper span {
            color: white;
            display: block;
            position: relative;
            text-align: center;
            padding: 5px 0;
        }

        .breadcrumb_wrapper ul li:last-child {
            margin-right: 43px;
        }

    .firsta {
        margin-top: 29px;
    }

<div class="phases">
    <ul class="breadcrumb">
        <li><a href="Pre-project.aspx" class="firsta">Pre-project</a></li>
        <li class="breadcrumb_wrapper">
            <span>Implementation project</span>
            <ul class="breadcrumb">
                <li><a href="Analysis.aspx">Analysis</a></li>
                <li><a href="Design.aspx">Design</a></li>
                <li><a href="Development.aspx">Development</a></li>
                <li><a href="Implementation.aspx">Implementation</a></li>
                <li><a href="Operation.aspx">Operation</a></li>
            </ul>
        </li>
    </ul>
</div>

无法使箭头更长

1 个答案: