写一个梯形盒子,左下角是左下圆弧,右下角是右下圆弧

好的，以下是一个梯形盒子的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;
  overflow: hidden;
  position: relative;
}

.trapezoid::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  bottom: -100px;
  left: -100px;
  transform: translateX(-50%);
}

.trapezoid::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  bottom: -100px;
  right: -100px;
  transform: translateX(50%);
}

解释一下代码：

- 与之前的例子类似，使用`border`属性实现梯形盒子，其中`border-bottom`表示底边的宽度和颜色，`border-left`和`border-right`表示左右两边斜边的宽度和颜色，`transparent`表示透明色。
- 使用`overflow: hidden`隐藏斜边超出盒子的部分。
- 使用伪元素`::before`和`::after`实现左下角和右下角的圆弧，其中`border-radius: 50%`表示将正方形变成圆形，`transform: translateX(-50%)`和`transform: translateX(50%)`表示将圆形向左和向右移动，使其与梯形盒子的底边对齐。
- 为了使圆弧与梯形盒子的颜色一致，可以将`background-color`属性设置为与底边颜色相同的值。