css梯形盒子,底部倒角效果

要实现底部倒角效果的梯形盒子，可以使用 CSS 3 的 transform 属性来实现。具体的实现步骤如下：

1. 首先，创建一个正常的矩形盒子，设置它的宽度和高度。
2. 使用 `transform: skew()` 属性将盒子倾斜一定角度，这里以倾斜 10 度为例。
3. 将盒子的宽度增加一定值，使得梯形的上边长和下边长不同。
4. 设置盒子的背景颜色和边框样式，可以根据需要进行调整。
5. 使用 `overflow: hidden` 属性将盒子内部溢出的部分隐藏起来。
6. 使用 `::before` 伪元素来实现底部倒角效果。

以下是一个示例代码：

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

.trapezoid {
  width: 200px;
  height: 100px;
  transform: skewY(-10deg);
  background-color: #ccc;
  border: 1px solid #333;
  overflow: hidden;
  position: relative;
}

.trapezoid::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #ccc;
  transform: skewY(10deg);
}

这样就可以实现底部倒角效果的梯形盒子了。