是否有可能使这些箭头与html和CSS？

Question

我正在尝试使用HTML和CSS而不是图像来显示一些箭头-这是图像：

我正在尝试使用伪元素之前和之后制作这些箭头，但是我遇到了问题。

这是我的代码：

HTML：

<ul class="steps-list">
      <li class="step-item">
        <a href="#" class="step-link">Contact us</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Consult with RCIC</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Apply via your pathway</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Settle in Canada</a>
      </li>
</ul>

上海社会科学院：

.steps-list {
  display: flex;
  .step-item {
    display: inline-block;
    text-align: center;
    width: 25%;
    .step-link {
      font-weight: bold;
      background: #e2e3e4;
      width: 100%;
      display: inline-block;
      padding: 2rem 1rem;
      &:hover {
        @include gradient(left, $gradientList2);
      }
    }
  }
}

我顺便关注了这篇文章： https : //css-tricks.com/snippets/css/css-triangle/

Answer 1

检查这个网站

 .clearfix:after { clear: both; content: ""; display: block; height: 0; } .container { font-family: 'Lato', sans-serif; width: 1000px; margin: 0 auto; } .wrapper { display: table-cell; height: 400px; vertical-align: middle; } .nav { margin-top: 40px; } .arrow-steps .step { font-size: 14px; text-align: center; color: #666; cursor: default; margin: 0 3px; padding: 10px 10px 10px 30px; min-width: 180px; float: left; position: relative; background-color: #d9e3f7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background-color 0.2s ease; } .arrow-steps .step:after, .arrow-steps .step:before { content: " "; position: absolute; top: 0; right: -17px; width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 17px solid transparent; border-left: 17px solid #d9e3f7; z-index: 2; transition: border-color 0.2s ease; } .arrow-steps .step:before { right: auto; left: 0; border-left: 17px solid #fff; z-index: 0; } .arrow-steps .step:first-child:before { border: none; } .arrow-steps .step:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .arrow-steps .step span { position: relative; } 

 <div class="container"> <div class="wrapper"> <div class="arrow-steps clearfix"> <div class="step current"> <span> Step 1</span> </div> <div class="step"> <span>Step 2 some words</span> </div> <div class="step"> <span> Step 3</span> </div> <div class="step"> <span>Step 4</span> </div> </div> </div> </div> 

Answer 2

[编辑]再次查看您的图像后，我无法解释第一个平坦的元素。 我已经更新了答案。

使用前，后和第n个子选择器，您可以实现图像中显示的内容。 之前和之后的伪元素用于创建箭头的上半部分和下半部分，而第n个子选择器用于使箭头看起来逐渐靠近在一起。

 .steps-list { display: flex; list-style: none; } .steps-list .step-item { position: relative; display: flex; align-items:center; text-align: center; width: 25%; } .steps-list .step-item .step-link { font-weight: bold; width: 100%; display: inline-block; padding:10px 5px; box-sizing:border-box; } .step-link::before { content: ""; display: block; position: absolute; transform: skew(-40deg, 0); background: #e2e3e4; height: 50%; bottom: 0; z-index: -1; left:5px; } .step-link::after { content: ""; display: block; position: absolute; transform: skew(40deg, 0); background: #e2e3e4; height: 50%; top: 0; z-index: -1; left:5px; } .step-item:nth-child(1){ overflow:hidden; } .step-item:nth-child(1) .step-link::after { width:95%; left:-15px; } .step-item:nth-child(1) .step-link::before { width: 95%; left:-15px; } .step-item:nth-child(2) .step-link::after { width: 90%; } .step-item:nth-child(2) .step-link::before { width: 90%; } .step-item:nth-child(3) .step-link::after { width: 95%; } .step-item:nth-child(3) .step-link::before { width: 95%; } .step-item:nth-child(4) .step-link::after { width: 100%; } .step-item:nth-child(4) .step-link::before { width: 100%; } 

 <ul class="steps-list"> <li class="step-item"> <a href="#" class="step-link">Contact us</a> </li> <li class="step-item"> <a href="#" class="step-link">Consult with RCIC</a> </li> <li class="step-item"> <a href="#" class="step-link">Apply via your pathway</a> </li> <li class="step-item"> <a href="#" class="step-link">Settle in Canada</a> </li> </ul>