如何实现带圆角的三角形绘制？

AI 小北

2026-7-14

实现带圆角三角形的非图片方案

不用静态图片的话，有几种可靠的CSS/SVG实现方式，以下是具体方案：

方法一：CSS锥形渐变 + 裁剪路径

利用锥形渐变定义三角形区域，配合容器圆角实现边角圆润，代码简洁：

.rounded-triangle {
  width: 200px;
  height: 200px;
  border-radius: 12px; /* 调整圆角大小 */
  background: conic-gradient(from 135deg at center, transparent 0 25%, #2563eb 25% 75%, transparent 75% 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

clip-path 裁剪出三角形形状
border-radius 给容器添加圆角，让三个边角自然圆润
调整#2563eb可以修改三角形颜色，border-radius值控制圆角弧度

方法二：内嵌SVG（精准可控）

SVG能直接给路径添加圆角，兼容性好且效果精准，适合对形状要求高的场景：

<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- rx/ry 控制圆角大小，修改fill值改变颜色 -->
  <path d="M50 5 L95 95 L5 95 Z" fill="#2563eb" rx="8" ry="8"/>
</svg>

d 属性定义三角形的三个顶点坐标（M50 5是顶部顶点，L95 95和L5 95是底部两个顶点）
rx和ry设置路径的圆角半径，数值越大圆角越明显

方法三：伪元素拼接（兼容旧浏览器）

如果需要兼容不支持锥形渐变的旧浏览器，可以用伪元素组合出带圆角的三角形：

.rounded-triangle {
  position: relative;
  width: 200px;
  height: 173px; /* 等边三角形高度：宽度×√3/2，保证形状规整 */
}
.rounded-triangle::before,
.rounded-triangle::after {
  content: "";
  position: absolute;
  background: #2563eb;
}
/* 顶部圆角 */
.rounded-triangle::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
/* 底部带圆角的三角形主体 */
.rounded-triangle::after {
  top: 12px; /* 与顶部圆形半径一致，避免缝隙 */
  width: 100%;
  height: calc(100% - 12px);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}