Search code examples
htmlcsssassbootstrap-5

Make a triangle for the right side of a 'li'

I have the following HTML defined:

<ul class="steps d-flex">
   <li class="step">Basic Details<div class="triangle triangle-right"></div></li>
</ul>

With the following CSS:

.steps li {
    @extend .text-center;
    position: relative;
    overflow: hidden;
    flex: 1 1;
    align-items: center;
    justify-content: center;
    background: $grey-600;
}

It looks like this:

enter image description here

I'd like to have a triangle pointing to the right of the div like so:

enter image description here

Notice how payment has a triangle that looks like it's pointing to 'done'

How do I do this?

Solution

  • To create a breadcrumb / steps-progress component is quite simple using CSS clip-path and CSS calc(). Here I use a CSS var --s for the arrow "size" which you can set to any desired value:

    /*QuickReset™*/ * { margin: 0; box-sizing: border-box; }
body { font: 1rem/1.4 sans-serif; }

/* STEPS COMPONENT */

.steps {
  --s: 2rem; /* arrow size */
  display: flex;
}

.steps > * {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  background: #ddd;
  padding: 1.5rem 1rem;
  /* Arrow shape */
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, calc(0% + var(--s)) 50%);
  margin-left: calc(var(--s) * -0.7);
}

.steps > :first-child {
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%);
  margin-left: 0;
}

.steps > :last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, var(--s) 50%);
}

.steps .is-active { background: #0bf; }
    <nav class="steps">
  <a href="">Details</a>
  <a href="" class="is-active">Payment</a>
  <a href="">Done</a>
</nav>