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

可以使用 CSS 的 transform 属性和伪元素来实现梯形两边凹凸的效果。具体实现步骤如下：

1. 使用一个 div 元素作为容器，设置其宽度和高度。

2. 使用 ::before 和 ::after 伪元素分别作为容器的左上角和右上角。

3. 使用 transform 属性将伪元素进行旋转，使其呈现梯形效果。

4. 使用 border-radius 属性设置伪元素的边框圆角，使其呈现凹凸效果。

示例代码如下：

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

.trapezoid {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.trapezoid::before,
.trapezoid::after {
  content: "";
  position: absolute;
  top: 0;
}

.trapezoid::before {
  left: 0;
  width: 50%;
  height: 100%;
  transform: skewX(-20deg);
  border-top-right-radius: 20px;
}

.trapezoid::after {
  right: 0;
  width: 50%;
  height: 100%;
  transform: skewX(20deg);
  border-top-left-radius: 20px;
}

运行效果如下图所示：