css 实现梯形l两边凹凸梯形效果

可以使用 CSS 的伪元素和 transform 属性来实现梯形两边凹凸效果。

HTML 结构：

<div class="trapezoid"></div>

CSS 样式：

.trapezoid {
  position: relative;
  width: 200px;
  height: 80px;
  background-color: #333;
  transform: skew(-10deg); /* 将元素倾斜10度 */
}

.trapezoid::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 80px;
  background-color: #333;
  transform: skew(10deg); /* 将伪元素倾斜10度 */
}

.trapezoid::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 80px;
  background-color: #333;
  transform: skew(-10deg); /* 将伪元素倾斜-10度 */
}

以上代码会生成一个宽度为 200px，高度为 80px 的黑色梯形，两侧各有一个凹凸的梯形。可以根据需要调整宽高和颜色。