在最后一个元素中创建带有圆角箭头的 css 面包屑

Question

我需要创建一个面包屑导航，其中最后一项在元素前后都有箭头，但这些箭头是圆角的，我不知道该怎么做。查看图片：

到目前为止我有这个：

  <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>

用这个 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;
    }
  }
}

可以在这里看到：https://codepen.io/efirvida/pen/OJmgBGV

Answer 1

这很快就会变得非常棘手。您最终需要制作非常复杂的剪辑路径，这最终会变得非常麻烦。

我建议获取每种颜色的圆角三角形的 SVG，并在 :before 或 :after 中使用它们。根据您拥有的 CSS，将它们放在那里而不是左边框会很容易。

在最后一个元素中创建带有圆角箭头的 css 面包屑

Create css breadcrumb with rownded corners arrow in the last element

html

css

breadcrumbs