进度条股利风格

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