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;
    }


  • 相关阅读:
    Vue之axios基础使用
    Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目
    解决:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    CentOS root用户修改只读文件时提示加! 解决办法
    CentOS 7 源码编译安装 Redis
    CentOS安装Jdk并配置环境变量
    Vue + Spring Boot 项目实战(一):项目简介
    druid 数据源 使用属性文件的一个坑
    scala 学习笔记(07) 一等公民的函数
    linux:手动校准系统时间和硬件CMOS时间
  • 原文地址:https://www.cnblogs.com/yi-miao-2333/p/14487771.html
Copyright © 2011-2022 走看看