css實現三角矩形的步驟條
阿新 • • 發佈:2022-04-18
前不久在開發過程中遇到需要類似下圖的步驟條
在面向百度程式設計的幫助下,結合本人的專案需求實現的,在此記錄,以備不時之需。
專案使用的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; } } }