1. 程式人生 > 其它 >css實現三角矩形的步驟條

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