css写多边形边框(clip-path)

效果图

css样式

    .box-ticket {
    padding: 0.1vw 0.1vw 0.1vw 0.1vw;
    background-color: #3f78c5;
    clip-path: polygon(0% 0%, 11.7vw 0, 13.7vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%);

    }
    .left-box-ticket {
        width: 28vw;
        height: 11.7vw;
        background-image: url('__CDN__/assets/image/高光.png');
        /* 不重复 */
        background-repeat: no-repeat;
        /* 满屏 */
        background-size: 21vw 4.2vw;
        background-color: #040469;
        border-top: solid 0.1vw transparent;
        border-right: solid 0.165vw #3f78c5;
        clip-path: polygon(0% 0%, 11.5vw 0, 13.5vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%);

    }

data

    <div class="box-ticket">
                        <div class="left-box-ticket">
                        </div>
                    </div>

注：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏