如何使用CSS创建这种弧形梯形？

目标效果：

你当前的代码存在两个问题：一是border-radius: 25x拼写错误（应为25px）；二是单纯用polygon类型的clip-path无法实现带圆角的切角效果。下面提供两种可行方案：

方案一：伪元素叠加法（兼容性好） #

这种方法通过伪元素模拟带圆角的切角，适合大多数场景：

实现第一个图形（右侧底部切角） #

div {
  position: relative;
  background: red;
  height: 300px;
  width: 500px;
  border-radius: 25px;
  overflow: hidden;
}

div::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  /* 尺寸对应你原clip-path的78%位置，可按需调整 */
  width: 22%;
  height: 22%;
  background: #fff; /* 颜色需与父元素所在的页面背景一致 */
  border-top-left-radius: 25px;
}

实现第二个图形（左侧底部切角） #

只需调整伪元素的位置和圆角方向：

div {
  position: relative;
  background: red;
  height: 300px;
  width: 500px;
  border-radius: 25px;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 22%;
  height: 22%;
  background: #fff;
  border-top-right-radius: 25px;
}

方案二：clip-path: path()（精准控制） #

使用SVG路径语法定义带圆角的轮廓，能实现更精细的形状控制，现代浏览器均支持：

第一个图形的代码 #

div {
  background: red;
  height: 300px;
  width: 500px;
  clip-path: path('M0,25 C0,11.1929 11.1929,0 25,0 L475,0 C488.8071,0 500,11.1929 500,25 L500,225 L390,225 C376.1929,225 365,236.1929 365,250 L365,275 C365,288.8071 376.1929,300 390,300 L25,300 C11.1929,300 0,288.8071 0,275 L0,25 Z');
}

第二个图形的代码 #

调整路径中左侧的切角部分即可：

div {
  background: red;
  height: 300px;
  width: 500px;
  clip-path: path('M0,25 C0,11.1929 11.1929,0 25,0 L475,0 C488.8071,0 500,11.1929 500,25 L500,275 C500,288.8071 488.8071,300 475,300 L110,300 C96.1929,300 85,288.8071 85,275 L85,250 C85,236.1929 96.1929,225 110,225 L0,225 L0,25 Z');
}

提示：可以可视化调整clip-path参数，快速得到需要的形状。

内容的提问来源于stack exchange，提问作者Valentin