border radius - CSS box-shadow z-index or change order

Question

I want to achieve the following effect using box-shadow:

but I am achieving the following:

I am using the following code:

<div class="progress-container"></div>

.progress-container {
  width: 100%;
  height: 11px;
  position: relative;
  background: #EAEFF5;
  border-radius: 5px;
  z-index: -1;

  box-shadow: 
    80px 0 0  #0AA693 inset, 
    500px 0 0 #FF7800 inset;
}

You can find a my codepen here

thanks for any help.

question from:https://stackoverflow.com/questions/65837831/css-box-shadow-z-index-or-change-order

Answer 1

I don't think it's possible to do this with a box shadow because you cannot set a starting point for the x position.

.progress-container {
  width: 100%;
  height: 11px;
  position: relative;
  background: #EAEFF5;
  border-radius: 5px;
}

.progress-container::before,
.progress-container::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.progress-container::before {
  background-color: #FF7800;
  width: 500px;
}

.progress-container::after {
  background-color: #0AA693;
  width: 80px;
}

<div class="progress-container">
</div>