Css 如何使用Twitter引导构建这样的定制形状的缎带？

我试图建立自定义色带，以显示进展，使用引导。 类似这样的东西（见图）。

不知道从哪里开始。下面是一些代码：

    <div class="row">
         <div class="col-xs-2 progress-ribbons active">Step 1</div>
         <div class="col-xs-2 progress-ribbons">Step 2</div>
         <div class="col-xs-2 progress-ribbons">Step 3</div>
         <div class="col-xs-2 progress-ribbons">Step 4</div>
         <div class="col-xs-2 progress-ribbons">Step 5</div>
    </div>

---

请提出最有效的解决方法。我更喜欢使用引导。如果没有，也欢迎任何其他解决方案

检查此项-检查此项请将其添加为答案，以便我可以投票支持

.progress-ribbons {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #F0F0F0;

    position: relative;
    height: 44px;

    padding-left:3em;

}

.progress-ribbons.active {
    background-color: #d5a6bd;
    color:white;
}
.progress-ribbons:after {
    content: '';

    /* positioning */
    position: absolute;
    left: 100%;
    top: -1px;

    /* triangle */
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-left: 24px solid #f0f0f0;
    border-bottom: 21px solid transparent;
} 

.progress-ribbons.active:after {
    border-left: 24px solid #f0f0f0;
    background-color: #d5a6bd;
}