纯css实现进度状态条上箭头三角样式（附图）

如上图，我们要实现中间的三角箭头，我这里总结了三种实现方式：

第一种：你可以将非矩形的地方切成图片来处理，放在div里，这样上面的图形会有5个并列的div，可以采用浮动来实现效果

第二种：

我们将这个进度条（我也不知道叫啥）分成一个一个的div，最外面用bootstrap的栅格col-md-6，col-md-3，col-md-3来包裹，分别对应上图中的三个最外层的div（红色）；

然后将里面分成内容和三角两个div（图上要用到的三角都用黑色div表示了）内容div（紫色）要包裹三角div（黑色）；

最后三角div在当前紫色div的哪边就向哪边浮动。

OK，布局思路讲完了，下面直接上代码了：

下面给出css的代码

      .stage-blank {        float: right;        width: 10px;        height: 50px;        border-left: 10px solid #4fb0e2;        border-top: 25px solid  #f6f6f7;        border-bottom: 25px solid  #f6f6f7;      }

第三种：是伪类的方法，在after和before里添加三角的样式。我没写，所以此处省略了哈哈哈~