zoukankan      html  css  js  c++  java
  • div复杂边框-梯形边框组合

    如图,我的目的是写一个像图片一样的div边框

    <div id="div1"><!-- 整个div -->
         <div class="trapezoidMaxLine leftDistance"><!-- 最外层梯形 -->
              <div class="trapezoidMinLine"></div><!-- 内层梯形 -->
              <span class="unitName titleText">用户访问量</span>
         </div>
         <div id="userVisitEchart"></div><!-- 柱状图 -->
    </div>
    
    #div1 {
        position: relative;/*必须,为了梯形定位*/
         341px;
    }
    .trapezoidMaxLine {/*最外层梯形所在的div*/
        position: absolute;/*相对于div1定位*/
        background: #062343;/*设置成背景色,遮挡下边框*/
        z-index: 4;
        height: 5px;/*根据实际情况*/
         102px;/*根据实际情况*/
        top: -5px;/*定位,根据实际情况*/
    }
    /*重点来啦!!!最外层梯形代码在此*/
    .trapezoidMaxLine:before {
        content: '';
        position: absolute;/*相对于trapezoidMaxLine定位*/
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        border: 1px solid #3a27e3;
        border-bottom: 0 solid #fff;
        transform: perspective(10px) rotateX(7deg);
    }
    /*内层梯形所在的div,和最外层的一样,区别是定位参照物,和颜色位置*/
    .trapezoidMinLine {/*内层梯形所在的div*/
        position: absolute;
        z-index: 4;
        height: 3px;
         94px;
        top: 3px;
        left: 4px;
    }
    .trapezoidMinLine:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #52a9ec;
        border: 1px solid #3a27e3;
        border-bottom: 0 solid #fff;
        transform: perspective(10px) rotateX(7deg);
    }
    
    
  • 相关阅读:
    【转】Storm并行度详解
    Storm 集群安装配置
    【原】storm源码之storm代码结构【译】
    Storm中-Worker Executor Task的关系
    Storm源码分析--Nimbus-data
    storm配置
    Nimbus<三>Storm源码分析--Nimbus启动过程
    Nimbus<二>storm启动nimbus源码分析-nimbus.clj
    Twitter Storm源代码分析之Nimbus/Supervisor本地目录结构
    linux 相关学习记录
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/12868683.html
Copyright © 2011-2022 走看看