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;
}
}
}
分类:
css
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了