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

好的，以下是一个梯形盒子的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: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

解释一下代码：

- 使用`border`属性实现梯形盒子，其中`border-bottom`表示底边的宽度和颜色，`border-left`和`border-right`表示左右两边斜边的宽度和颜色，`transparent`表示透明色。
- 使用`border-bottom-left-radius`和`border-bottom-right-radius`属性实现底部圆角。
- 使用`overflow: hidden`隐藏斜边超出盒子的部分。
- 使用伪元素`::before`实现底部内凹圆角，通过设置`bottom: -100px`将圆的底部定位到盒子的底部，并设置`box-shadow`属性实现内阴影效果。