如何使用CSS为容器制作带圆角的切角效果？

你用clip-path: polygon()做不了圆角切角的核心原因是：这个属性只能生成由直线段组成的多边形，没法直接创建带曲线的圆角。下面给你几个可行的解决方案：

方案1：用clip-path: path()（代码简洁，推荐） #

CSS的path()函数支持定义带圆弧、贝塞尔曲线的路径，刚好能实现圆角切角。对应你原来的切角位置，示例代码如下：

.container {
  width: 400px;
  height: 300px;
  background: #2563eb;
  /* path里的A命令用来画圆弧，替换原polygon的直线段 */
  clip-path: path('M0,0 L100%,0 L100%,calc(100% - 50px) 
                   Lcalc(100% - 100px),calc(100% - 50px) 
                   A20,20 0 0,1 calc(100% - 120px),100% 
                   L0,100% Z');
}

• 其中A20,20 0 0,1 ...里的前两个20是圆弧半径，你可以调整这个数值来控制圆角大小，匹配你的目标效果。

方案2：伪元素+border-radius（兼容性更好） #

如果需要兼容不支持path()的旧浏览器，可以用伪元素叠加的方式模拟：

.container {
  position: relative;
  width: 400px;
  height: 300px;
  background: #2563eb;
  overflow: hidden;
}

.container::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 70px;
  background: #fff; /* 这里填容器父元素的背景色 */
  border-top-left-radius: 20px; /* 调整这个值控制圆角大小 */
}

• 原理是用带圆角的伪元素在右下角“盖住”一部分容器，模拟出切角+圆角的效果。

方案3：CSS Mask遮罩 #

用径向渐变做遮罩，也能快速实现圆角切角：

.container {
  width: 400px;
  height: 300px;
  background: #2563eb;
  -webkit-mask-image: radial-gradient(circle at calc(100% - 100px) calc(100% - 50px), transparent 20px, black 21px);
  mask-image: radial-gradient(circle at calc(100% - 100px) calc(100% - 50px), transparent 20px, black 21px);
}

• 径向渐变在指定位置生成一个透明圆（对应圆角），剩下的区域保持不透明，从而实现遮罩效果。调整渐变的圆心位置和透明半径就能匹配需求。

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