HTML+CSS-->箭头流程进度条(两种方法)

1、伪类

2、移动

 

 html

 <!-- 1、用伪类画箭头部分 -->

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <br/><br/><br/>

    <!--2、红箭头是单独的盒子，通过移动显示出箭头 -->

    <div id="progress">

        <div class="bg-red">

        </div>

        <div class="bg-red">

            <div class="triangle-box">

                <div class="triangle bg-red"></div>

            </div>

        </div>

        <div class="bg-red">

            <div class="triangle-box">

                <div class="triangle bg-red"></div>

            </div>

        </div>

        <div class="bg-gray">

            <div class="triangle-box">

                <div class="triangle bg-red"></div>

            </div>

        </div>

    </div>

CSS

/* 1、使用伪类画箭头部分 */
.test{
    float: left;
    margin: 0  2px 0 ;
     100px;
    height: 40px;
    background-color: #DD2727;
    position: relative;
}
.test:after{
    content: '';  
    display: block;  
    border-top: 20px solid transparent;  
    border-bottom: 20px solid transparent;  
    border-left: 20px solid #DD2727; 
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 10;
}
.test:before{
    content: '';  
    display: block;  
    border-top: 20px solid transparent;  
    border-bottom: 20px solid transparent;  
    border-left: 20px solid white; 


}



/* 2、红箭头是单独的盒子，通过移动显示出箭头 */
#progress{
    display: flex;
    justify-content: start;
}
#progress>div{
     100px;
    height: 34px;
    line-height: 35px;
    color: white;
    position: relative;
    text-align: center;
}
/* 三角形 */
.triangle-box{
    display: inline-block;
     20px;
    height: 34px;
    overflow: hidden;
    position: absolute;
    left: 0;
}
.triangle{
    transform:rotate(45deg);
    transform-origin: left top;
    position: absolute;
    top: -3px;
    left: -1px;
     25px;
    height: 25px;
    border: 2px solid white;
}
/* 红色、灰色背景 */
.bg-red{
    background-color: #DD2727;
}
.bg-gray{
    background-color: #CCCCCC;
}