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

好的，以下是一个梯形盒子的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`属性不同，这里使用了正常的阴影效果，产生了外凹圆角的效果。

相关问题

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

好的，以下是一个梯形盒子的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`属性实现内阴影效果。

写一个梯形盒子,底下两个角,是反圆角

您好，我可以帮您提供一个 CSS 代码示例，实现一个梯形盒子，底下两个角是反圆角：

.trapezoid {
  width: 200px;
  height: 0;
  border-top: 50px solid #333; /* 上边框为实线，高度为梯形上底 */
  border-right: 100px solid transparent; /* 右边框为虚线，宽度为梯形右侧斜边 */
  border-bottom: 50px solid transparent; /* 下边框为虚线，高度为梯形下底 */
  border-left: 100px solid transparent; /* 左边框为虚线，宽度为梯形左侧斜边 */
  border-bottom-left-radius: 20px; /* 底部左侧反圆角半径 */
  border-bottom-right-radius: 20px; /* 底部右侧反圆角半径 */
}

您可以在 HTML 中添加一个 `div` 元素，并添加 `trapezoid` 类名，即可看到效果：

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

效果如下图所示（黑色为梯形，红色为反圆角）：