仅用CSS能否实现圆角三角形？现有三角代码无法添加圆角求解决方案

嘿，这个问题我之前也踩过坑！用border拼出来的三角形确实没法直接用border-radius加圆角——毕竟那些border本质上是拼接的边框，不是真正的盒子区域，所以圆角属性根本起不了作用。不过咱们完全不用急着上SVG，有几种纯CSS的方法能轻松搞定这个需求～

方法1：圆锥渐变（Conic Gradient） #

这是最简洁的方法之一，用渐变直接绘制三角形，这样整个元素是一个真实的盒子，border-radius就能正常生效了：

.triangle {
  width: 80px;
  height: 80px;
  /* 给左上角加圆角 */
  border-radius: 12px 0 0 0;
  /* 从左上角开始，绘制90度的扇形（也就是我们要的三角形） */
  background: conic-gradient(from 0deg at top left, #ff4369 90deg, transparent 0);
}

方法2：伪元素+旋转裁剪 #

如果需要兼容不支持圆锥渐变的旧浏览器，这个方法更稳妥：用一个带圆角的伪元素，旋转后通过父元素的overflow:hidden裁剪出三角形形状：

.triangle {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* 正方形对角线长度是边长的√2≈1.41倍，确保旋转后能覆盖父元素 */
  width: 141%;
  height: 141%;
  background: #ff4369;
  /* 给伪元素加圆角，旋转后刚好对应三角形的左上角 */
  border-radius: 12px;
  transform: rotate(-45deg) translate(-30%, 0);
}

什么时候考虑用SVG？ #

如果你的需求更复杂（比如不规则的圆角、多色渐变三角形），或者需要完美兼容非常老旧的浏览器，SVG确实是更可靠的选择。它的代码也很直观，直接定义路径就能实现带圆角的三角形：

<svg width="80" height="80" viewBox="0 0 80 80">
  <!-- d属性里的C命令用来绘制左上角的圆角 -->
  <path d="M12,0 L80,0 L80,80 L0,80 L0,12 C0,5.373 5.373,0 12,0 Z" fill="#ff4369"/>
</svg>

总的来说，只是做简单的带圆角三角形的话，纯CSS方法完全够用，没必要上SVG～

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