用CSS创建进度条（凹形）

Question

我正在尝试用 css 创建一个进度条，就像这样

通过下面的代码我找到了这个结果

但是我想要反转，有人可以帮我吗？

.first-bar {
  border-radius: 20px 0px 0px 20px;
  background: radial-gradient(20px 20px at calc(100% + 4px) 50%, #8e7cc3 18px, #8e7cc3 19px, #8e7cc3 20px, #4a86e8 21px);
}

.second-bar {
  background: radial-gradient(20px 20px at calc(100% + 4px) 50%, #ffab40 18px, #ffab40 19px, #ffab40 20px, #8e7cc3 21px);
}

.third-bar {
  background: radial-gradient(20px 20px at calc(100% + 4px) 50%, #6aa84f 18px, #6aa84f 19px, #6aa84f 20px, #ffab40 21px);
}

.fourth-bar {
  border-radius: 0px 20px 20px 0px;
  background: radial-gradient(20px 20px at calc(100% + 4px) 50%, #6aa84f 18px, #6aa84f 19px, #6aa84f 20px, #6aa84f 21px);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-10 text-white text-bold text-center">
  <div class="first-bar py-1" :style="{'width':'25%'}">25</div>
  <div class="second-bar py-1" :style="{'width':'25%'}">25</div>
  <div class="third-bar py-1" :style="{'width':'25%'}">25</div>
  <div class="fourth-bar py-1" :style="{'width':'25%'}">25</div>
</div>

Answer 1

您可以在每个元素上添加一个 z-index 来定义应在哪个级别显示元素

.bar-progress {
  width:60%;
}

.bar-progress div {
 text-align:center;
 padding-left:8px;
 padding-right:8px;
 border-radius:20px;
 color:white;
 width:25%;
 position:relative;
 display:inline-block;
}

.bar-progress div:first-child {
  margin-left:0 !important;
}

.bar-progress div {
  margin-left: -45px;
}

.first-bar {
  background: #4a86e8;
  z-index:4;
}

.second-bar {
  background: #8e7cc3;
  z-index:3;
}

.third-bar {
  background: #ffab40;
  z-index:2;
}

.fourth-bar {
  background: #6aa84f;
  z-index:1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="bar-progress">
  <div class="first-bar">25</div>
  <div class="second-bar">25</div>
  <div class="third-bar">25</div>
  <div class="fourth-bar">25</div>
</div>

Answer 2

您可以使用 3D 变换技巧避免大量 z-index，它适用于任意数量的元素：

.bar-progress {
  margin:10px;
  transform-style: preserve-3d; /* here */
}

.bar-progress div {
  text-align: center;
  border-radius: 20px;
  color: white;
  width: 120px;
  display: inline-block;
  transform:rotateY(-0.1deg); /* and here */
}

.bar-progress div:not(:first-child) {
  margin-left: -45px
}

.first-bar  {background: #4a86e8;}
.second-bar {background: #8e7cc3;}
.third-bar  {background: #ffab40;}
.fourth-bar {background: #6aa84f}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="bar-progress">
  <div class="first-bar">25</div>
  <div class="second-bar">25</div>
  <div class="third-bar">25</div>
  <div class="fourth-bar">25</div>
</div>

<div class="bar-progress">
  <div class="first-bar">25</div>
  <div class="second-bar">25</div>
  <div class="third-bar">25</div>
  <div class="fourth-bar">25</div>
  <div class="third-bar">25</div>
  <div class="second-bar">25</div>
</div>

用CSS创建进度条（凹形）

Create progress bar with CSS (concave shape)

html

css

radial-gradients

vue.js