Making border of last item straight-CodePudding

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 >
  <div >Step 1</div>
  <div >Step 2 text</div>
  <div >Step 3</div>
  <div >Step 4</div>
</div>

How I can make right border of last child same as left border of first child?

CodePudding user response：

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 >
  <div >Step 1</div>
  <div >Step 2 text</div>
  <div >Step 3</div>
  <div >Step 4</div>
</div>

CodePudding user response：

EDIT: apologies I left in a typo so it mucked it up, here's the new clip-path for the last child

.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(100% 0, 100% 50%, 100% 100%, 0% 100%, var(--d) 50%, 0% 0%);
}

.bar-step.active {
  background: #23468c;
  color: #fff;
}

<div >
  <div >Step 1</div>
  <div >Step 2 text</div>
  <div >Step 3</div>
  <div >Step 4</div>
</div>