進度條股利風格

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