Progress-bar Div style

Question

Существует индикатор прогресса и отлично работает, но у меня есть проблема с стилистикой. Как вы можете видеть на изображении, мне нужна правильная сторона прогрессирования, как на изображении. Я не так хорош в css. Если есть герой, чтобы объяснить мне, как я мог бы его стилизовать, я был бы очень рад этому.

Я ценю ваши усилия :)

enter image description here

Answer 1

Взгляните на демо

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