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;
            }
        }
    }
复制代码

 

posted @   _只码农  阅读(373)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示