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