在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1.效果图
2.wxml <view class="steps "> <view class="step active"> 1 </view> <view class="step"> 2 </view> <view class="step"> 3 </view> </view>
3.wxss .steps { line-height: 80rpx; height: 80rpx; text-align: center; font-size: 28rpx; width: 100%; color: #fff; }
/* 当前步骤中的样式修改 */
.steps .active, .steps .active:after { background-color: #c71d23; }
.step { width: 33.33%; float: left; background: #999; position: relative; }
/* 为每个步骤末尾加灰色三角形和白色边框 */
.step::after { content: ""; border: 10rpx solid #fff; border-bottom: 0; border-left: 0; height: 57rpx; width: 57rpx; position: absolute; display: block; top: 6rpx; right: -26rpx; z-index: 10; transform: rotate(45deg); }
/* 取消最后一项所有的after伪类 */
.step:last-child::after { content: ""; border: none; height: 0; width: 0; z-index: 11; }
|
请发表评论