zoukankan      html  css  js  c++  java
  • 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;
    }


  • 相关阅读:
    Alfred上可提高工作效率的Workflow推荐
    局部性原理——各类优化的基石
    持续学习——程序猿的军备竞赛
    http://regex.alf.nu/ 非标准答案
    13总结
    Ubuntu下python安装mysqldb(驱动)
    北大ACM试题分类+部分解题报告链接
    poj 3253 Fence Repair(优先队列+huffman树)
    Centos/Fedora下安装Twisted,failed with error code 1 in /tmp/pip-build-H1bj8E/twisted/解决方法
    关于command 'gcc' failed with exit status 1 解决方法
  • 原文地址:https://www.cnblogs.com/yi-miao-2333/p/14487771.html
Copyright © 2011-2022 走看看