优雅绘制 css 等腰梯形边框的技巧
对于 HTML 中的 <p> 元素，想要绘制等腰梯形边框，主要思路是通过添加一个梯形或 div 元素，并运用伪类来实现。
梯形代码示例：
<p><div style="border-bottom: 10px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent;"></div></p>
伪类实现：
立即学习“前端免费学习笔记（深入）”；
<p><span class="triangle"></span></p>
CSS 代码：
.triangle {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent; /* 将边框分为左右两个部分 */
border-left-width: 20px; /* 右侧边框宽度 */
border-right-width: 20px; /* 左侧边框宽度 */
border-bottom-width: 30px; /* 下边框宽度 */
position: relative;
top: -10px; /* 向上移动 10px 创建阴影效果 */
}其他参考：
[css 如何绘制等腰梯形边框？](参考链接已省略)
通过以上方法，可以轻松绘制出等腰梯形边框，这需要灵活运用 HTML 元素和 CSS 技巧，以实现不同形状的边框效果。
