如何使用Twitter Bootstrap构建这样的自定义形状的色带？

Question

我正在尝试使用bootstrap构建自定义功能区以显示进度。 像这样的东西（见图）。

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

    <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>

CSS

.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;
}

请建议解决此问题的最有效方法。我更喜欢使用bootstrap。如果没有，也欢迎任何其他解决方案