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