如何在 css 中创建类似于梯形的边框？
问题：
如何使用 css 创建下图所示的梯形边框？
<p>这是一段文字</p>
答案：
立即学习“前端免费学习笔记（深入）”；
有几种方法可以实现此效果，但最常见的方法是使用伪类和额外的 div 元素：
<style>
.border-wrapper {
position: relative;
padding: 10px;
}
.border-wrapper::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #000 #000;
border-width: 10px 0 10px 20px;
}
</style>
<div class="border-wrapper">
<p>这是一段文字</p>
</div>其他方法：
还有一些其他方法可以实现类似的效果，例如：
- 使用渐变
- 使用几何图案
- 使用 svg
可以参考 [这个问题的讨论](https://segmentfault.com/a/1190000018687151) 以获取更多灵感和解决方案。
