进步栏Div风格

Question

有一个进度条，工作正常，但我在造型部分有问题。正如你在图像上看到的那样，我想要在图像上进行正确的进展。我对css不是那么好。如果有一个英雄向我解释我如何设计它，我会非常高兴。

感谢您的努力：）

enter image description here

Answer 1

看一下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