本文主要是介绍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 思否
这篇关于css实现刘海梯形边框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
