如何实现侧边为直线边框的trapezium（梯形）样式

你可以通过以下两种CSS方案实现目标效果，可直接复用代码调整参数适配你的需求： #

方案1：transform斜切法（兼容性更佳，适合规则梯形） #

HTML结构 #

<div class="trapezium-container">
  <div class="trapezium-content">
    内部展示内容
  </div>
</div>

CSS样式 #

/* 外层容器，控制整体宽度和侧边延伸长度 */
.trapezium-container {
  position: relative;
  width: 600px;
  padding: 0 100px;
  box-sizing: border-box;
}

/* 左右侧边延伸直线 */
.trapezium-container::before,
.trapezium-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #333;
}
.trapezium-container::before {
  left: 0;
  /* 调整倾斜角度和梯形侧边保持一致 */
  transform: skewX(-15deg);
  transform-origin: top left;
}
.trapezium-container::after {
  right: 0;
  transform: skewX(15deg);
  transform-origin: top right;
}

/* 梯形主体 */
.trapezium-content {
  height: 100px;
  background: #f5f5f5;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: skewX(-15deg);
  margin: 0 30px;
  /* 修正内部内容倾斜，保证文字/元素正常显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.trapezium-content * {
  transform: skewX(15deg);
}

方案2：clip-path裁剪法（灵活性更高，适合自定义不规则梯形） #

CSS样式 #

.trapezium-container {
  position: relative;
  width: 600px;
  height: 120px;
}

/* 梯形本体 */
.trapezium-body {
  position: absolute;
  left: 130px;
  top: 10px;
  width: 340px;
  height: 100px;
  background: #f5f5f5;
  border: 2px solid #333;
  /* 自定义梯形路径，四个参数对应：左上、右上、右下、左下四个点的坐标 */
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

/* 左侧延伸直线 */
.trapezium-container::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #333;
  /* 旋转角度和梯形侧边角度匹配即可 */
  transform: rotate(-15deg);
}

/* 右侧延伸直线 */
.trapezium-container::after {
  content: '';
  position: absolute;
  right: 50px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #333;
  transform: rotate(15deg);
}

参数调整说明 #

• 调整transform的倾斜/旋转角度、clip-path的坐标点，可修改梯形的侧边倾斜幅度
• 修改边框的宽度、颜色属性，可调整边框样式
• 调整容器的padding、伪元素的定位参数，可修改侧边直线的延伸长度
• 响应式场景下可将固定像素值替换为百分比、vw等相对单位

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