css实现刘海梯形边框

效果：

一般来说就是加一个梯形，我的话一般都是增加一个div然后用伪类实现：

<div class="demo"><div class="block"></div>
</div>

.demo {width: 500px;height: 500px;border: 3px solid #253365;margin: auto;
}
.demo .block {background: #253365;width: 100px;height: 10px;position: relative;margin: 0 auto;
}
.demo .block:before,
.demo .block:after {content: '';width: 0;height: 0;border: 10px solid transparent;border-top-color: #253365;display: block;position: absolute;left: 0;transform: translate(-50%);
}
.demo .block:after {left: auto;right: 0;transform: translate(50%);
}
body {width: 100vw;height: 100vh;background: #060d2a;display: flex;
}

更多信息：
前端 - css 这种边框用css怎么写啊？ - SegmentFault 思否