0

I need to create a breadcrumb where the last item has arrows before and after the element, but those arrows have rounded corners and I don't know how to do it. Se the picture:

enter image description here

So far I have this:

  <ul class="my_breadcrumb">
    <li><a href="">
        <i class="fa fa-home"></i></a>
    </li>
    <i class="fa fa-angle-right"></i>
    <li>
      <a href="#">ITEM 1</a>
    </li>
    <i class="fa fa-angle-right"></i>
    <li>
      <a href="#">ITEM 2</a>
    </li>
    <i class="fa fa-angle-right"></i>
    <li>
      <a href="#">ITEM 3</a>
    </li>
    <i class="fa fa-angle-right"></i>
  </ul>

with this scss:

:root {
  --blue: #033bad;
  --white: #fff;
  --light-blue: #40d9e8;
}

.my_breadcrumb {
  background-color: var(--white-bg);
  box-shadow: 0 0 4px 1px rgba(200, 200, 200, 0.2);
  width: max-content;
  position: relative;
  margin-left:20px;

  i.fa-angle-right {
    color: var(--light-blue);
    font-weight: 900;
    line-height: 40px;
    margin-left: -4px;
    margin-right: -1px;
    background-color: var(--white);
    &:last-of-type,
    &:nth-last-of-type(2) {
      display: none;
    }
  }

  li {
    display: inline-block;
    background-color: var(--white);
    margin-left: -3px;
    padding: 10px 0;
    height: 41px;

    &:first-child,
    &:only-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      a{
        margin-left:-25px;
      }
    }

    &:last-of-type:not(:only-child) {
      background-color: var(--light-blue);
      a {
        color: var(--white);
        margin-left: 10px;
      }
    }

    &:last-of-type:not(:only-child)::after,
    &:last-of-type:not(:only-child)::before {
      content: "";
      position: absolute;
      top: 0;
      border: 20px solid transparent;
    }
    &:last-of-type:not(:only-child)::after {
      border-left: 15px solid var(--light-blue);
    }
    &:last-of-type:not(:only-child)::before {
      border-left: 15px solid var(--white);
    }

    a {
      font-weight: 600;
      text-decoration: none;
      color: var(--light-blue);
      padding: 0 15px;
      margin-top: 5px;
    }
  }
}

can be seen here: https://codepen.io/efirvida/pen/OJmgBGV

efirvida
  • 4,592
  • 3
  • 42
  • 68

1 Answers1

1

This can get really tricky really fast. You'd end needing to make pretty complex clip paths and that can end up being pretty cumbersome.

I'd recommend getting an SVG of the rounded corner triangle in each color and use them in a :before or :after. Based on the CSS that you have, it would be pretty easy to put them in there instead of the left border.

davidleininger
  • 909
  • 4
  • 11