可视化的框

没啥难度，可复制直接使用  上代码

<div class="featuresBox">

                        <div class="locat locaStation">title</div>

                            <div class="horn chargeHorn">

                                <div class="lt bugle"></div>

                                <div class="rt bugle"></div>

                                <div class="rb bugle"></div>

                                <div class="lb bugle"></div>

                                <div id="chargeChart" style="width: 100%;height: 100%;"></div>

                            </div>

                    </div>

.featuresBox {

    background: rgba(54, 111, 240, 0.2);

    position: relative;

}

.locat {

    position: absolute;

    left: 50%;

    width: 130px;

    height: 30px;

    line-height: 30px;

    top: -15px;

    background: #152871;

    color: #00BFFE;

    border: 1px solid #1E8BE4;

    text-align: center;

    z-index: 10;

    margin-left: -50px;

}

.horn>.bugle {

    width: 15px;

    height: 15px;

    position: absolute;

}

.horn .lt {

    border-top: 3px solid #4B83D8;

    border-left: 3px solid #4B83D8;

    left: -2px;

    top: -2px;

}

.horn .rt {

    border-top: 3px solid #4B83D8;

    border-right: 3px solid #4B83D8;

    right: -2px;

    top: -2px;

}

.horn .rb {

    border-bottom: 3px solid #4B83D8;

    border-right: 3px solid #4B83D8;

    right: -2px;

    bottom: -2px;

}

.horn .lb {

    border-bottom: 3px solid #4B83D8;

    border-left: 3px solid #4B83D8;

    left: -2px;

    bottom: -2px;

}

写的有问题，及时留言。觉得用到的朋友，点个赞