用 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>