css 写一个正梯形盒子

可以使用 CSS 的 `transform` 属性来实现正梯形。

HTML 代码：

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

CSS 代码：

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid #333; /* 底边 */
  border-left: 50px solid transparent; /* 左侧斜边 */
  border-right: 50px solid transparent; /* 右侧斜边 */
  transform: skew(-20deg); /* 将元素倾斜 20 度 */
}

解释一下上述代码：

1. 设置元素的宽度为 200px，高度为 0，通过设置 `border-bottom` 属性实现元素的底边；
2. 通过设置 `border-left` 和 `border-right` 属性实现元素的左右斜边；
3. 使用 `transform` 属性将元素倾斜 20 度，实现正梯形效果。

相关问题

css写一个正梯形盒子

可以使用 CSS 的 transform 和 rotate 属性来实现一个正梯形盒子的效果，代码如下：

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

.trapezoid {
  width: 200px;
  height: 100px;
  border-top: 50px solid #ccc;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform: rotate(45deg);
}

解释一下上面的代码：

- 设置元素的宽度为 200px，高度为 100px，因为梯形盒子的高度和底边长度是相等的；
- 设置边框样式，这里用的是一个上边为 50px，两侧斜边为 50px 的三角形；
- 使用 transform 属性，设置元素绕中心点旋转 45 度，使得边框呈现出正梯形的效果。

这样就能够实现一个基本的正梯形盒子了。

css 写一个正梯形盒子,底部带两个反圆角

可以使用 CSS 的 `transform` 属性来实现正梯形，然后使用 `border-radius` 属性来设置两个反圆角。

HTML 代码：

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

CSS 代码：

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid #333; /* 底边 */
  border-left: 50px solid transparent; /* 左侧斜边 */
  border-right: 50px solid transparent; /* 右侧斜边 */
  transform: skew(-20deg); /* 将元素倾斜 20 度 */
  border-bottom-left-radius: 20px; /* 左下反圆角 */
  border-bottom-right-radius: 20px; /* 右下反圆角 */
}

解释一下上述代码：

1. 设置元素的宽度为 200px，高度为 0，通过设置 `border-bottom` 属性实现元素的底边；
2. 通过设置 `border-left` 和 `border-right` 属性实现元素的左右斜边；
3. 使用 `transform` 属性将元素倾斜 20 度，实现正梯形效果；
4. 使用 `border-bottom-left-radius` 和 `border-bottom-right-radius` 属性设置左下和右下反圆角。