使用 css 或 svg 创建一致且响应迅速的曲线

Question

我必须在灰色背景上创建一个弯曲的叠加层，并且无论屏幕宽度如何（除了移动设备尺寸），它都能保持其比例，因为一些文本会放在顶部并且需要放在始终是白色部分。

我一直在尝试使用 svg 图像，但无法在任何屏幕尺寸上实现一致的比例。

如果我创建的 svg 太长，那么它在 5k 屏幕尺寸以外的任何地方都太浅了：

body {
  background-color: gray;
}

<svg width="100%" height="100%" viewBox="0 0 2500 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
  <path d="M0,0c0,0 1298,323.581 1923.83,349.695c625.837,26.113 575.186,10.188 575.186,10.188l-1.377,2.687l-0.288,23.43l0.832,414l-2498.18,0.775l0,-413l0,-387.775Z" style="fill:#fff;" />
</svg>

所以我一直在尝试使用 css 边框来复制效果，但似乎无法模拟该曲线。有疯狂的 css 边界印章的人可以提供帮助吗？

Answer 1

如果我对您的问题的理解正确，您的图片没有按比例缩小以适应较小屏幕上的文本大小？

如果是这样，最好在图像上方放置一个 div，其中包含相同背景颜色的文本，并将图像放在其下方。它看起来是相同的元素，但会根据需要增长和缩小。如果您希望我提供一个示例，那么我可以。

这仅在图像保持纯色时才有效。

编辑：重读这个问题，我仍然对你问的问题感到困惑。看来您可能正在寻找环绕曲线的文本？如果答案不是您想要的，如果您能澄清道歉。