代码之家 › 专栏 › 技术社区 › htoniv

如果过程完成,在进度条中绘制刻度线

css html

htoniv · 技术社区 · 7 年前

我用CSS&HTML创建了一个简单的progressbar。在这里我使用了三个类active、inactive和done。

.container {
  width: 600px;
  margin: 100px auto;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #7d7d7d;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: "";
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}

.progressbar li.done:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.done+li:after {
  background-color: #55b776;
}

.progressbar li.inactive:before {
  border-color: #7d7d7d;
  background-color: #7d7d7d;
}

.progressbar li.inactive+li:after {
  background-color: #7d7d7d;
}

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>

如果类是活动的,它将显示带有 background-color: green
如果类处于非活动状态,它将显示带有 background-color: grey
我要的是在上课的时候 done “我需要用 背景色:绿色 在绿色圆圈内打勾。

我试了很多次,但还是没能完成。请帮帮我。 Here is my working fiddle link

2 回复 | 直到 7 年前

Hiren Vaghasiya 7 年前

在中使用刻度线 content: "â";

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li.done:before {
      content: "â";
      color: #ffffff;
      font-size: 20px;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }

<div class="container">
  <ul class="progressbar">
      <li class="done"></li>
      <li class="active"></li>
      <li class="inactive"></li>
  </ul>
</div>

根据您的要求使用css

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }
  
  .progressbar li.done {
    font-size: 16px;
    position: relative;
  }

  .progressbar li.done:after {
    content: " ";
    display: block;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
    position: absolute;
    left: 4.2em;
    top: 26%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:9;
    background-color: #55b776;
  }

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>

Balázs Varga 7 年前

你只需要设置 content 当 done 类已应用。

.progressbar li.done:before {
    content: "â";
}

摇摆小提琴: https://jsfiddle.net/ordmpf59/