如何固定SVG的border radius？或无需SVG实现对角分区固定圆角

一、修复SVG圆角不随尺寸变化的问题 #

如果要继续使用SVG实现，核心是让SVG的圆角半径保持绝对像素值，不受缩放影响：

• 在SVG元素上添加vector-effect: non-scaling-size属性，该属性会让SVG图形元素在缩放时保持原始尺寸，包括圆角半径。
• 确保SVG路径中的圆角半径使用固定像素值（如6px），而非相对单位或基于viewBox的比例值。
• 避免让SVG通过width: 100%; height: 100%;直接拉伸，改用transform: scale()进行缩放，同时设置transform-origin为对应角落，保证圆角位置准确。

示例SVG代码调整：

<svg viewBox="0 0 100 100" style="vector-effect: non-scaling-size;">
  <path d="M100,0 L0,100 L0,0 L100,0 Z" fill="gray" />
  <!-- 绘制白色圆角缺口，半径固定为6px -->
  <path d="M100,0 L6,6 L0,100 L100,100 Z" fill="white" />
</svg>

二、无需SVG的纯CSS替代方案 #

用CSS mask 属性可以更简洁地实现需求，且圆角尺寸完全固定，不受容器缩放影响：

核心思路 #

将父容器分为两个绝对定位的子容器（图片容器和链接容器），分别用mask裁剪出对角线分割的三角形区域，再给mask设置固定圆角半径。

代码示例 #

<div class="split-block">
  <div class="image-wrap">
    <img src="your-image.jpg" alt="图片">
  </div>
  <a href="#" class="link-wrap">查看详情</a>
</div>

.split-block {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 裁剪出左上到右下的三角形区域 */
  -webkit-mask: polygon(0 0, 100% 0, 0 100%) border-box;
  mask: polygon(0 0, 100% 0, 0 100%) border-box;
  /* 设置右下角（对角线角落）的固定圆角 */
  -webkit-mask-border-radius: 0 0 6px 0;
  mask-border-radius: 0 0 6px 0;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: white;
  text-decoration: none;
  /* 裁剪出右下到左上的三角形区域 */
  -webkit-mask: polygon(100% 0, 100% 100%, 0 100%) border-box;
  mask: polygon(100% 0, 100% 100%, 0 100%) border-box;
  /* 设置左上角（对角线角落）的固定圆角 */
  -webkit-mask-border-radius: 6px 0 0 0;
  mask-border-radius: 6px 0 0 0;
}

优势 #

• 无需额外SVG资源，代码更简洁
• 圆角半径为固定像素值，无论容器在移动端还是桌面端缩放，圆角大小始终保持6px
• 兼容性良好，主流浏览器均支持mask属性（需添加-webkit-前缀兼容webkit内核浏览器）

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