如何使用HTML、CSS绘制梯形等形状并添加内容与边框

你之前用常规边框法实现梯形无法添加边框，是因为该方案本身就是用border属性模拟形状，没有额外的区域承载外层边框。可以通过以下两种方案实现带边框、可自定义填充色、支持内部放内容的梯形，也可以嵌套实现你图中多层盒模型的效果：

方案1：clip-path 方案（最灵活，推荐） #

通过双层元素实现，外层做边框，内层承载内容和背景色，形状调整仅需修改polygon的坐标参数即可：

<!-- 单层梯形结构，多层效果直接嵌套即可 -->
<div class="trapezoid-wrapper">
  <div class="trapezoid-inner">
    <div class="box-name">Content</div>
    <span>填充色：#ffffff</span>
  </div>
</div>

.trapezoid-wrapper {
  width: 400px;
  height: 250px;
  background: #000; /* 边框颜色 */
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); /* 四个点分别对应左上、右上、右下、左下，调整数值可修改梯形坡度 */
  padding: 2px; /* 边框宽度 */
  box-sizing: border-box;
}
.trapezoid-inner {
  width: 100%;
  height: 100%;
  background: #ffffff; /* 内部填充色 */
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); /* 和外层形状保持一致 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

该方案内部可以正常添加文本、图片等任意内容，也可以嵌套多层不同尺寸、不同背景色的梯形实现你图中的多层盒模型效果。

方案2：伪元素边框补全方案（兼容性更好，支持低版本浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可以用伪元素补全侧边边框：

<div class="trapezoid">
  <div class="content">
    Content 内容
  </div>
</div>

.trapezoid {
  position: relative;
  width: 340px; /* 梯形下底宽度 */
  height: 200px;
  background: #fff;
  margin: 0 30px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
/* 左右两侧斜边 */
.trapezoid::before, .trapezoid::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
}
.trapezoid::before {
  left: -30px;
  border-width: 0 0 204px 30px; /* 高度要加上下边框的2px */
  border-color: transparent transparent #fff transparent;
  border-left: 2px solid #000;
}
.trapezoid::after {
  right: -30px;
  border-width: 204px 30px 0 0;
  border-color: #fff transparent transparent transparent;
  border-right: 2px solid #000;
}

内容的提问来源于stack exchange，提问作者rohit