Removing border radius from inset box shadow

Question

I'm trying to create a simple progress bar with a curved border of the bar and for filling the bar, I'm using the inset box shadow trick.

But I'm getting a problem which I'm unable to solve. Can you guys please help me?

Output: Screenshot

Desired Output: Screenshot

.skillset {
    display: inline-block;
    width: 60%;
}

.skill p {
    float: left;
    margin-top: 5px;
}

.bar {
    width: 85%;
    float: right;
    height: 30px;
    border-radius: 20px;
    background: #ddd;
    display: inline-block;
    box-shadow: inset 600px 0 0 0 #2ecc71;
}

.clear {
    clear: both;
}

<div class="skillset">
 <div class="skill">
  <p>HTML & CSS</p> <div class="bar"></div>
  <div class="clear"></div>
 </div>
</div>

Please tell me what changes can I make to my code to get the desired output.

Answer 1

You can simply use a pseudo-element and easily control the progress by adjusting the width of the element:

.skillset {
  display: inline-block;
  width: 60%;
}

.skill p {
  float: left;
  margin-top: 5px;
}

.bar {
  width: 85%;
  float: right;
  height: 30px;
  border-radius: 20px;
  display: inline-block;
  background-color: #ddd;
  position: relative;
}

.bar:before {
  content: "";
  position: absolute;
  z-index: 2;
  background: green;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  border-radius: 20px;
}

.clear {
  clear: both;
}

<div class="skillset">
  <div class="skill">
    <p>HTML & CSS</p>
    <div class="bar"></div>
    <div class="clear"></div>
  </div>
</div>

Here is another idea using linear/radial-gradient:

.skillset {
    display: inline-block;
    width: 60%;
}

.skill p {
    float: left;
    margin-top: 5px;
}

.bar {
    width: 85%;
    float: right;
    height: 30px;
    border-radius: 20px;
    display: inline-block;
    background:linear-gradient(to right,green 50%,transparent 0%),
    radial-gradient(circle at center,green 68%,transparent 70%) 50% 0/30px 30px no-repeat;    
    background-color: #ddd;
}

.clear {
    clear: both;
}

<div class="skillset">
 <div class="skill">
  <p>HTML & CSS</p> <div class="bar"></div>
  <div class="clear"></div>
 </div>
</div>

And if you want to use box-shadow you may simply think differently and use it like this:

.skillset {
  display: inline-block;
  width: 60%;
}

.skill p {
  float: left;
  margin-top: 5px;
}

.bar {
  width: 85%;
  float: right;
  height: 30px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: inset -100px 0 0 0 #ccc;
  background: #2ecc71;
}

.clear {
  clear: both;
}

<div class="skillset">
  <div class="skill">
    <p>HTML & CSS</p>
    <div class="bar"></div>
    <div class="clear"></div>
  </div>
</div>