css实现外圆角梯形

CSS可以实现多种有趣的形状，例如外圆角梯形。这种形状通常用于构建特殊的装饰或边框效果。

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid orange;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

以上代码说明了如何通过CSS实现一个外圆角梯形。 其中，我们设置了元素的宽度为200px，高度为0，接着设置了下边框100px的粗度和颜色。

我们使用了两个透明的边框，左边框50px，右边框50px，以形成梯形效果。我们还添加了圆角效果，在上边框的左右两端的半径为20px。

通过以上代码的调整，可以实现任意大小的外圆角梯形，可以通过修改边框、颜色和圆角效果等属性来达到不同的效果。