CODEWITHSUNDEEP
cssprogress-bar
Emruardo
Emruardo

Reputation: 37

Progress-bar Div style

There is a progress-bar and works fine but I have an issue on styling part. As you can see on the image, I want right side of progressing as on the image. I am not that good on the css. If there is a hero to explain to me how I could style it, I would be really happy about it.

I appreciate your effort :)

enter image description here

Upvotes: 0

Views: 888

Answers (1)

Ilya B.
Ilya B.

Reputation: 950

Take a look at demo

HTML

<div class="progress" >
  <div style="width: 50%;"></div>
</div>

CSS

.progress { background: #e3e887; text-align: left; font-size: 0; }
.progress > div { display: inline-block; height: 88px; position: relative; background: linear-gradient(to right, #e21e2c 0%, #cac511 100%); overflow: hidden; }
.progress > div:before { position: absolute; top: 0; right: 0; content: ''; width: 0; height: 0; border-top: 44px solid #e3e887; border-left: 44px solid transparent; }
.progress > div:after { position: absolute; bottom: 0; right: 0; content: ''; width: 0; height: 0; border-bottom: 44px solid #e3e887; border-left: 44px solid transparent; }

Demo

Upvotes: 1

Related Questions