无图无定位新版css步骤条兼容ie6+

<ul class="ui-step list-unstyled">
            <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>填写账户名</li>
            <li class="step-item current"><b class="arrow-space"></b><b class="arrow-bg"></b>验证身份</li>
            <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>设置新密码</li>
            <li class="step-item">完成</li>
        </ul>
less:
.ui-step(@num){
    .ui-step{
        position: relative;
        overflow: hidden;
        margin: 20px;
        .step-item{
            // position: relative;
            float: left;
            zoom: 1;
            width: percentage(1/@num);
            *width: percentage(1/@num) - 0.0416666%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #e5e5e5;
            b{
                float: right;
                position: relative;
                overflow: hidden;
                width: 0;
                height: 0;
                border-style: solid;
                _border-style: dotted dotted dotted solid;
                border-color: #ccc transparent transparent transparent;
                border-width: 15px;
            }
            .arrow-space{
                border-width: 20px;
                margin: -5px -35px -5px 0;
                border-color: transparent transparent transparent #fff;
            }
            .arrow-bg{
                right: -30px;
                margin-left: -30px;
                border-color: transparent transparent transparent #e5e5e5;

            }
            &:first-child{
                border-radius: 3px 0 0 3px;
            }
            &:last-child{
                border-radius: 0 3px 3px 0;
            }
        }
        .current{
            z-index: 1;
            background-color: Orange;
            color: #fff;
            .arrow-space{
                _border-style: solid;
                border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fff;
            }
            .arrow-bg{
                border-color: transparent transparent transparent Orange;
            }
        }
    }

}

.ui-step(4);
原文地址:https://www.cnblogs.com/zhishaofei/p/4447216.html