Unable to make the arrow tip longer - html

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">
<ul class="breadcrumb">
<li>Pre-project</li>
<li class="breadcrumb_wrapper">
<span>Implementation project</span>
<ul class="breadcrumb">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>

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>Pre-project</li>
<li class="breadcrumb_wrapper">
<span>Implementation project</span>
<ul class="breadcrumb">
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Operation</li>
</ul>
</li>
</ul>
</div>