使用CSS和HTML的时间线指标

上面表示用于生成图像的当前代码.但是你会注意到有几个缺少的元素.

您可以使用伪元素,CSS三角形和线性渐变的组合来实现.

该linear-gradient(to right, #AFCB6D, #126A38);会创建一个混合的背景颜色效果.

最后的三角形可以使用CSS三角形概念使用伪元素创建.

指标也是用伪元素圆圈创建的.可以content: " "在伪元素中指定或删除伪元素,并在其中指定文本div以便更好地进行自定义.

不使用CSS内容的常规文本:

.timeline {
  width: 500px;
  height: 10px;
  margin: 20px;
  background: linear-gradient(to right, #AFCB6D, #126A38);
  position: relative;
  font-family: Roboto;
}
.timeline::before,
.timeline::after {
  content: " ";
  position: absolute;
  height: 0px;
  width: 0px;
  top: -5px;
}
.timeline::before {
  left: -20px;
  border: 10px solid #AFCB6D;
  border-color: transparent #AFCB6D transparent transparent;
}
.timeline::after {
  right: -20px;
  border: 10px solid #126A38;
  border-color: transparent transparent transparent #126A38;
}
.indicators {
  position: relative;
}
.indicator-1,
.indicator-2,
.indicator-3 {
  border: 5px solid #AFCB6D;
  background: white;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: -5px;
  position: absolute;
}
.indicator-1 {
  left: 10px;
}
.indicator-2 {
  border-color: #5B9951;
  left: 240px;
}
.indicator-3 {
  border-color: #126A38;
  left: 475px;
}
.indicator-text {
  position: relative;
  top: 15px;
}
.indicator-1 .indicator-text {
  left: -20px;
}
.indicator-2 .indicator-text {
  left: -15px;
}
.indicator-3 .indicator-text {
  left: -10px;
}

  

    

      
Standard
    
    

      
Better
    
    

      
Best