使用 CSS 创建进度条（凹形）答案

【问题标题】：Create progress bar with CSS (concave shape)使用 CSS 创建进度条（凹形）
【发布时间】：2022-01-20 07:58:47
【问题描述】：

我试图用这样的 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>

【问题讨论】：

你确定这是完整的 CSS 代码吗？
是的，我确定，我认为“运行代码 sn-p”不起作用，因为这里没有声明的引导程序的“行”类
你能添加你正在使用的引导链接吗？
@Gharbi 如果那引导你的row col-10 的类组合是错误的。 Cols 应该是立即的 childs 行，而不是同一个元素。我还将引导样式表添加到您的 sn-p 中，以便样式实际工作
您可以尝试使用 z-index 属性来确保第四条显示在第三条之上。这样，对于每个条形，每个元素的左边框都是可见的，而右侧的边框被右侧的元素覆盖。

标签： html css vue.js radial-gradients

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

您可以在每个元素上添加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>

【讨论】：

这似乎给出了原始结果而不是期望的结果。
是的，我反转 z-index 以获得想要的结果
非常感谢，它很有帮助，而且很有效