CSS实现div右下角圆润弧形切角效果的方法

你当前使用的圆锥渐变conic-gradient生成的遮罩边界天然是直线，只能做出尖锐的直边切角，要实现弧形内凹切角，把遮罩换成径向渐变radial-gradient即可，正圆形径向渐变刚好能生成平滑的圆弧切边，代码如下：

.box {
  /* 控制切角尺寸，可根据需求自行修改 */
  --corner-size: 78px;
  --mask:
    radial-gradient(circle at 100% 100%, transparent 0 var(--corner-size), #000 calc(var(--corner-size) + 1px)) 0 0/100% 100% no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

参数调整说明 #

• 直接修改--corner-size的数值就能调整切角大小，数值越大，弧形切角的范围越大
• 如果需要非正圆的自定义弧度，可以把渐变类型从circle改成ellipse，单独指定水平、垂直方向的半径，比如radial-gradient(ellipse 60px 90px at 100% 100%, transparent 0 78px, #000 79px)就能生成曲率不同的弧形切边
• 该方案和你原有代码的兼容性完全一致，所有支持CSS mask属性的浏览器都可以正常渲染，边缘不会出现锯齿

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