如何为CSS border实现的三角形最长边设置椭圆圆角效果

你当前使用border拼接实现的三角形，无法直接为斜边添加椭圆圆角，因为border-radius仅作用于元素本身的外框边角，无法适配border拼接出的斜向边。可以参考如下方案实现：

实现代码 #

HTML

<div id='triangle-topleft'></div>

CSS

#triangle-topleft {
  width: 100px;
  height: 50px;
  background: red;
  /* 调整path中Q后的坐标可修改椭圆圆角弧度，调整width/height可修改三角形尺寸 */
  clip-path: path("M 0 0 L 100 0 Q 48 26 0 50 Z");
}

参数调整说明 #

• 你可以修改clip-path中Q后的两个坐标值，来调整斜边的椭圆圆角弧度，两个数值的差异越大，椭圆拉伸效果越明显
• 如果需要调整三角形的整体尺寸，同步修改width、height属性，以及path内的坐标数值比例即可
• 如需兼容非常老旧的浏览器，可改用内联SVG作为元素背景的方案实现，最终效果完全一致

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