具有弯曲底部的 HTML 元素 [重复]答案

【问题标题】：HTML element with curved bottom [duplicate]具有弯曲底部的 HTML 元素 [重复]
【发布时间】：2020-12-10 18:39:37
【问题描述】：

我正在寻找一种在 CSS 中实现这一点的方法：

我正在寻找正确的方法。

我曾想过在 CSS 中使用 clip-path: url(#svg);，但很难做到。

我已经有了这个代表我想要的底部形状的 svg：

     <svg height="0" width="0" viewbox="0 0 1 1">
        <defs>
          <clipPath id="wave" clipPathUnits="objectBoundingBox">
            <!--<path d="M600,2 L600,42 L302.524213,42 C301.660332,42.0252073 300.818928,42.0252073 300,42 L0,42 L0,2 C133.63289,-1.65889201 206.966223,1.34619028 220,11.0152469 C247.844727,31.671749 274.511393,42 300,42 L302.524213,42 C319.584145,41.5022057 345.409408,31.1739546 380,11.0152469 C395.066732,2.23465585 468.400065,-0.770426432 600,2 Z" id="Combined-Shape" fill="#000000"></path>-->
            <path d="M1,0.048192771084337 L1,1.0120481927711 L0.50420702166667,1.0120481927711 C0.50276722,1.0126555975904 0.50136488,1.0126555975904 0.5,1.0120481927711 L0,1.0120481927711 L0,0.048192771084337 C0.22272148333333,-0.039973301445783 0.344943705,0.03243832 0.36666666666667,0.26542763614458 C0.413074545,0.7631746746988 0.45751898833333,1.0120481927711 0.5,1.0120481927711 L0.50420702166667,1.0120481927711 C0.53264024166667,1.0000531493976 0.57568234666667,0.75117962891566 0.63333333333333,0.26542763614458 C0.65844455333333,0.053847128915663 0.780666775,-0.018564492337349 1,0.048192771084337 Z" id="Combined-Shape" fill="#000000"></path>
          </clipPath>
        </defs>
      </svg>

SVG 看起来像这样：

什么方法最容易做到这一点？

【问题讨论】：

标签： css clip-path

【解决方案1】：

也许你可以在后面加上 ::。这是一个普通的盒子，在 :: 之后的那个波浪部分。

【讨论】：

真的不行，因为到处都是border-radius，是个很棘手的问题！