css3箭头步骤条

CSS3箭头步骤条可以使我们的网页看起来更加美观，它能够帮助我们有效地组织内容，帮助用户更好地完成一些操作。下面我们来看看如何使用CSS3来制作箭头步骤条：

  <ul class="step">
    <li class="active">第一步</li>
    <li>第二步</li>
    <li>第三步</li>
    <li>完成</li>
  </ul>

  <style>
    .step {
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 100%;
      position: relative;
    }

    .step:before,.step:after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      border-top: 2px solid #ccc;
      width: 50%;
      z-index: -1;
    }

    .step:before {
      left: 0;
    }

    .step:after {
      right: 0;
    }

    .step li {
      text-align: center;
      flex-basis: 20%;
      font-size: 16px;
      position: relative;
      z-index: 1;
    }

    .step li:after {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ccc;
      margin: 0 auto;
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .step li.active:after {
      background: #ff6f61;
    }

    .step li:first-child:before {
      display: none;
    }

    .step li:last-child:after {
      display: none;
    }
  </style>

我们使用了一个无序列表来表示步骤条，每个步骤都用一个li标签表示。在CSS样式中，我们给ul元素设置了一些flex布局属性，让li元素排列在一条直线上，然后使用:before和:after伪元素来创建了两条竖线，这两条竖线利用绝对布局定位在列表的两端。

每个li元素的宽度是20%，这样可以让四个步骤占据整个容器的宽度。我们给每个li元素设置了一个圆点，这个圆点使用了after伪元素来实现。第一个步骤和最后一个步骤的竖线和圆点通过:first-child和:last-child选择器来分别设置了不同的样式。

最后，我们通过给当前步骤添加一个.active类来改变它的样式，让它的圆点变成了红色，让用户更加清晰地知道当前所在的步骤。