css实现三角矩形的步骤条

 

前不久在开发过程中遇到需要类似下图的步骤条

 

 在面向百度编程的帮助下，结合本人的项目需求实现的，在此记录，以备不时之需。

项目使用的uniapp框架，:style里面的是修改步骤条在不同期间的颜色。无关形状，可以不管

 

<view class="setups">
            <view class="s1" v-for="(item,index) in setupName" :key='index'>
                <view class="title"
                    :style="setup==1&&index==0?'background-color:#289bff':setup!=1&&index==0?'background-color:#1ec31b':setup==1&&index==1?'background-color:#ccc':setup==1&&index==2?'background-color:#ccc':setup==2&&index==1?'background-color:#289bff':setup==2&&index==2?'background-color:#ccc':setup==3&&index==1?'background-color:#1ec31b':setup==3&&index==2?'background-color:#289bff':''">
                    <text class="less rless"></text>
                    {{item}}
                </view>
                <text class="less"
                    :style="setup==1&&index==0?'border-color:transparent transparent transparent #289bff':setup!=1&&index==0?'border-color:transparent transparent transparent #1ec31b':setup==1&&index==1?'border-color:transparent transparent transparent #ccc':setup==1&&index==2?'border-color:transparent transparent transparent #ccc':setup==2&&index==1?'border-color:transparent transparent transparent #289bff':setup==2&&index==2?'border-color:transparent transparent transparent #ccc':setup==3&&index==1?'border-color:transparent transparent transparent #1ec31b':setup==3&&index==2?'border-color:transparent transparent transparent #289bff':''"></text>
            </view>

</view>

css：

.setups {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .s1 {
            .title {
                width: 200rpx;
                height: 77rpx;
                line-height: 77rpx;
                text-align: center;
                background-color: #289fff;
                color: #FFFFFF;
                font-size: 32rpx;
                vertical-align: middle;
                float: left;
                z-index: 1;

                .rless {
                    border-color: transparent transparent transparent #FFFFFF;
                    float: left;
                }
            }

            .less {
                display: inline-block;
                border-style: dashed dashed dashed solid;
                border-color: transparent transparent transparent #289fff;
                //boder-width最后一项影响三角形的高度
                border-width: 40rpx 0 40rpx 32rpx;
                top: 0;
            }
        }
    }