I am working on angular app and I have a progress bar and code is as follows :
.bar {
--d: 1rem;
/* arrow depth */
--gap: 0.3rem;
/* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.6rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #d9e3f7;
color: #23468c;
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}
.bar-step:first-child {
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}
.bar-step.active {
background: #23468c;
color: #fff;
}<div class="bar">
<div class="bar-step active">Step 1</div>
<div class="bar-step">Step 2 text</div>
<div class="bar-step">Step 3</div>
<div class="bar-step">Step 4</div>
</div>How I can make right border of last child same as left border of first child?
>Solution :
Adapting last element’s clip path as below:
.bar {
--d: 1rem;
/* arrow depth */
--gap: 0.3rem;
/* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.6rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #d9e3f7;
color: #23468c;
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}
.bar-step:first-child {
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}
.bar-step:last-child {
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%)
}
.bar-step.active {
background: #23468c;
color: #fff;
}<div class="bar">
<div class="bar-step active">Step 1</div>
<div class="bar-step">Step 2 text</div>
<div class="bar-step">Step 3</div>
<div class="bar-step">Step 4</div>
</div>