使用CSS clip-path和CSS calc()创建breadcrumb / steps-progress组件非常简单。在这里，我使用CSS var --s作为箭头“size”，您可以将其设置为任何所需的值：

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

首先，您需要创建一个chevron元素。一个简单的方法来做它使用CSS。然后，您可以将其应用到您的示例中。
我建议你使用flexbox技术，这是更容易和优雅的方式来完成这类任务。
这是你的问题的一个例子。

.chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(5.5);
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px
}

.chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  right: 8px;
  top: 4px;
  color: white;
}

.container {
  font-size: 30px;
  display: flex;
  flex-direction: row;
  background-color: lightgrey;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.payment {
  margin-left: 20px;
  margin-right: 20px;
}

.done {
  margin-left: 20px;
  margin-right: 20px;
}

<div class="container">
  <div class="payment">Payment</div>
  <i class="chevron-right"></i>
  <div class="done">Done</div>
</div>

给定您提供的HTML和CSS，看起来您正在尝试使用具有triangle-right类的div创建三角形。要使这个三角形指向右边，可以使用：：before或：：after伪元素，再加上边框技巧来形成三角形。你可以这样做：

.triangle-right::before {
    content: '';
    position: absolute;
    top: 50%;  /* centers the triangle vertically */
    left: 100%;  /* places the triangle to the right of the containing 
div */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;  /* adjust size as needed */
    border-bottom: 10px solid transparent;  /* adjust size as needed */
    border-left: 10px solid $grey-600;  /* adjust size and color as 
needed */
    transform: translateY(-50%);  /* fine-tunes the vertical centering 
*/
}

使用此CSS，三角形将指向右侧，并将出现在类triangle-right的右侧。根据需要调整边框大小以更改三角形的大小。