如何为CSS绘制的向上白色三角形添加双侧内凹曲线

原来的CSS border方法只能绘制纯直线的三角形，无法添加内凹曲线，你可以通过以下两种方案实现需求：

方案一：使用SVG（推荐，兼容性好且形状可控） #

SVG可以精确绘制带曲线的形状，直接替换你原来的.triangle div即可：

<div class="triangle">
  <svg width="60" height="30" viewBox="0 0 60 30" fill="white">
    <path d="M30 0 C18 0, 0 8, 0 30 L60 30 C60 8, 42 0, 30 0 Z" />
  </svg>
</div>

调整说明： #

• width和height控制三角形的整体大小，对应你原来的60px宽、30px高
• d属性里的路径可调整数值改变内凹弧度：
  • 18 0和42 0控制顶部左右曲线的起点，数值越接近30，弧度越平缓
  • 0 8和60 8控制内凹的深度，数值越小，内凹越明显

方案二：使用CSS clip-path #

利用CSS的clip-path属性通过路径定义形状，无需修改HTML结构，只需替换.triangle的CSS：

.triangle {
  position: relative;
  z-index: 3;
  top: 3px;
  width: 60px;
  height: 30px;
  background: #FFFFFF;
  clip-path: path('M30 0 C18 0, 0 8, 0 30 L60 30 C60 8, 42 0, 30 0 Z');
}

注意事项： #

• 部分旧版浏览器对clip-path的path()函数支持有限，需兼容旧浏览器优先选SVG方案
• 同样可通过修改路径中的数值调整内凹的弧度和深度

替换后完整代码示例（SVG版本） #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>template</title> 

     <style type="text/css"> 
        table{ 
            border-collapse:collapse; 
        } 
        .triangle { 
            position: relative; 
            z-index: 3; 
            top: 3px; 
        } 
        .inner-body { 
            padding:10px; 
        }
        .gradient-bg {
            background: #eee;
            padding: 20px 0;
        }
     </style> 
</head> 
<body> 
    <table width="100%"> 
        <tr> 
            <td height="100px"></td> 
        </tr> 
        <tr> 
            <td align="center" valign="top"> 
                <table width="100%"> 
                    <tr> 
                        <td width="2%"></td> 
                        <td class="gradient-bg"> 
                            <table width="100%"> 
                                <tr> 
                                    <td class="inner-body"></td> 
                                </tr> 
                                <tr> 
                                    <td align="center">
                                        <div class="triangle">
                                          <svg width="60" height="30" viewBox="0 0 60 30" fill="white">
                                            <path d="M30 0 C18 0, 0 8, 0 30 L60 30 C60 8, 42 0, 30 0 Z" />
                                          </svg>
                                        </div>
                                    </td> 
                                </tr> 
                            </table> 
                        </td> 
                        <td width="2%"></td> 
                    </tr> 
                </table> 
            </td> 
        </tr> 
        <tr> 
            <td align="center" valign="middle" height="100px"> 
                <!--<img src="Images/logo.JPG" width="90" />--> 
            </td> 
        </tr> 
    </table> 
</body> 
</html>

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