Title: Unable to make the arrow tip longer
Tags: html;css
Question: As you can see when you run the snippet below, The "outer" arrow that currently wraps 5 smaller arrows dont look alot the smaller once. 

I know this is the line I have to modify, but no matter what I do, I can't achieve the desired result.

```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;
```

Style whise I want the "outer" arrow to look like the last arrow. as you can see the start and end of the "outer" arrow is not that "pointy"



```.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;
    }```
```<div class="phases"&gt;
    <ul class="breadcrumb"&gt;
        <li&gt;<a href="Pre-project.aspx" class="firsta"&gt;Pre-project</a&gt;</li&gt;
        <li class="breadcrumb_wrapper"&gt;
            <span&gt;Implementation project</span&gt;
            <ul class="breadcrumb"&gt;
                <li&gt;<a href="Analysis.aspx"&gt;Analysis</a&gt;</li&gt;
                <li&gt;<a href="Design.aspx"&gt;Design</a&gt;</li&gt;
                <li&gt;<a href="Development.aspx"&gt;Development</a&gt;</li&gt;
                <li&gt;<a href="Implementation.aspx"&gt;Implementation</a&gt;</li&gt;
                <li&gt;<a href="Operation.aspx"&gt;Operation</a&gt;</li&gt;
            </ul&gt;
        </li&gt;
    </ul&gt;
</div&gt;```




Comment: you could also aks on the previous question and i told you how to do ;) no need to a whole question to ask clarification for code you got from a previous question

Here is the accepted answer: 

```.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"&gt;
    <ul class="breadcrumb"&gt;
        <li&gt;<a href="Pre-project.aspx" class="firsta"&gt;Pre-project</a&gt;</li&gt;
        <li class="breadcrumb_wrapper"&gt;
            <span&gt;Implementation project</span&gt;
            <ul class="breadcrumb"&gt;
                <li&gt;<a href="Analysis.aspx"&gt;Analysis</a&gt;</li&gt;
                <li&gt;<a href="Design.aspx"&gt;Design</a&gt;</li&gt;
                <li&gt;<a href="Development.aspx"&gt;Development</a&gt;</li&gt;
                <li&gt;<a href="Implementation.aspx"&gt;Implementation</a&gt;</li&gt;
                <li&gt;<a href="Operation.aspx"&gt;Operation</a&gt;</li&gt;
            </ul&gt;
        </li&gt;
    </ul&gt;
</div&gt;```




Comment for this answer: i know what you have done because this is my code :) but you need to explain what you have done in the answer ... a code only answer is not a good answer even if it fixes the OP issue
Comment for this answer: @TemaniAfif i just adjusted the size and position attributes in the background properties.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2018:00:04/09/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'Unable to make the arrow tip longer', 'ViewCount': 52, 'id': 49726220, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}