如何仅用CSS和HTML生成指定特殊曲率形状？

一、SVG方案（推荐） #

对于这种非标准连续曲率的形状，SVG是最精准且易实现的方案，它能通过path元素精确绘制任意复杂轮廓，这是单纯用border-radius无法做到的。

简便的SVG制作工具 #

• Figma：直接绘制目标形状，导出为SVG即可，导出时可选择内联样式，方便嵌入HTML。
• Adobe Illustrator：绘制完成后导出SVG，调整导出选项精简代码。
• 在线SVG路径编辑器：手动拖拽节点调整曲线，实时预览效果，适合快速生成路径。

示例代码（近似图中形状） #

<svg width="200" height="150" viewBox="0 0 200 150" fill="#000" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 10C10 10 0 20 0 40V110C0 130 10 140 20 140H180C190 140 200 130 200 110V70C200 50 190 40 180 40H120C110 40 100 30 100 20C100 10 110 0 120 0H180C190 0 200 10 200 20V40"/>
</svg>

你可以直接将这段SVG嵌入HTML，或者作为背景图应用到元素上。

二、CSS替代方案（局限性大） #

如果不想用SVG，可尝试结合clip-path与border-radius，但这种方式很难完全匹配图中的复杂曲率，且浏览器兼容性不如SVG。示例如下：

<div class="custom-shape"></div>

.custom-shape {
  width: 200px;
  height: 150px;
  background: #000;
  clip-path: polygon(20px 10px, 0 40px, 0 110px, 20px 140px, 180px 140px, 200px 110px, 200px 70px, 180px 40px, 120px 40px, 100px 20px, 120px 0px, 180px 0px, 200px 20px, 200px 40px);
  /* 可局部添加border-radius微调，但无法实现完全一致的曲率 */
}

综上，优先推荐使用SVG方案来实现该形状。

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