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;/*必須，爲了梯形定位*/
    width: 341px;
}
.trapezoidMaxLine {/*最外層梯形所在的div*/
    position: absolute;/*相對於div1定位*/
    background: #062343;/*設置成背景色，遮擋下邊框*/
    z-index: 4;
    height: 5px;/*根據實際狀況*/
    width: 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;
    width: 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);
}