Create progress bar with CSS (concave shape)
I trying to create create a progress bar with css like this
With the code below I found this result
But I want the inverse, can someone please help me?
.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>
You can avoid a lot of z-index using a 3D transform trick and it will work for any number of elements:
.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>
you can add a z-index
on each element to define on which level element should be displayed
.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>