css - 进度条 Div 样式

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