时间戳

首页 > 解决方案 > 如何创建带有空心 V 形的 CSS 进度条？

css - 如何创建带有空心 V 形的 CSS 进度条？

问题描述

我需要创建一个雪佛龙风格的进度条，我可以用实体来做，但我只想让活动的步骤是实心的，而非活动的步骤是空心的。我怎样才能做到这一点？这就是我到目前为止所拥有的。任何想法我怎么能做到这一点？

<div class='grid'>
  <div class='step'></div>
  <div class='step'></div>
  <div class='step'></div>
  <div class='step'></div>
</div>

.grid {
  width: 660px;
  display: grid;
  grid-auto-flow: column;
}


.step {
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  color: white;
}

.step:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.step:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #002453;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

上面是一个简短的例子。这是我的完整 CSS 的小提琴： https ://jsfiddle.net/6h1L87wm/4/

标签： css

解决方案

您可以做的只是在与箭头匹配的网格周围放置一个边框。我还将显示更改为 flex 并设置对齐方式space-between以确保箭头从开始到结束。

.grid {
  width: 660px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  border: 1px solid #002453;
}

/* ----- step1 ----- */
.step1 {
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  border-radius: 10px 0px 0px 0px;
  color: white;
}

.step1:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #002453;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* ----- /step1 ----- */
/* ----- step2----- */
.step2 {
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  color: white;
}

.step2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.step2:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #002453;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* ----- /step2----- */
/* ----- step3---- */
.step3{
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  color: white;
}

.step3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.step3:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #002453;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* ----- /step3---- */
/* ----- step4 ----- */
.step4 {
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  border-radius: 0px 10px 0px 0px;
  color: white;
}
.step4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* ----- /step4 ----- */
<div class='grid'>
  <div class='step1'></div>
  <div class='step2'></div>
  <div class='step3'></div>
  <div class='step4'></div>
</div>

推荐阅读