写一个梯形盒子,底下是外凹圆角

好的，以下是一个梯形盒子的HTML和CSS代码，底下是外凹圆角：

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

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid #ccc;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  position: relative;
}

.trapezoid::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  bottom: -100px;
  left: -50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

与上一个例子相比，只有`.trapezoid::before`中的`box-shadow`属性不同，这里使用了正常的阴影效果，产生了外凹圆角的效果。