css进度栏与背景颜色和边框颜色

Question

我需要像这样的标签控件

任何人都可以帮我怎么做。

我能够创建没有背景颜色的标签，如下图：

#crumbs {
  width: 100%;
  display: grid;
}

#crumbs ul {
  list-style: none;
  padding: 7px 5px;
  margin: 0px;
}

#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  width: 22%;
}

#crumbs ul li a:after {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #3498db;
  position: absolute;
  right: -40px;
  top: 0;
  z-index: 1;
}

#crumbs ul li a:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}

#crumbs ul li a.inprogress {
  display: block;
  float: left;
  height: 50px;
  background: #34db3a;
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  width: 22%;
}

#crumbs ul li a.inprogress:after {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #34db3a;
  position: absolute;
  right: -40px;
  top: 0;
  z-index: 1;
}

#crumbs ul li a.inprogress:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}

#crumbs ul li a.cpmpleted {
  display: block;
  float: left;
  height: 50px;
  background: #b334db;
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  width: 22%;
}

#crumbs ul li a.cpmpleted:after {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #b334db;
  position: absolute;
  right: -40px;
  top: 0;
  z-index: 1;
}

#crumbs ul li a.cpmpleted:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}

<div id="crumbs">
  <ul>
    <li><a href="#1">One</a></li>
    <li><a href="#2" class="inprogress">Two</a></li>
    <li><a href="#3" class="cpmpleted"> Three </a></li>
  </ul>
</div>

Answer 1

我会考虑像这样的偏斜变换和伪元素：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  padding: 0 20px;
}

li {
  padding: 10px 30px;
  position: relative;
}

li:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 50%;
  right: 0;
  left: 0;
  background: var(--c);
  transform: skew(40deg);
}

li:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 0;
  left: 0;
  background: var(--c);
  transform: skew(-40deg);
}

li.active:before {
  border: 2px solid orange;
  border-bottom: none;
}

li.active:after {
  border: 2px solid orange;
  border-top: none;
}

<ul>
  <li style="--c:red"> Step 1</li>
  <li style="--c:green" class="active"> Step 2</li>
  <li style="--c:blue"> Step 3</li>
</ul>