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

Question

我必须在灰色 bg 的顶部创建一个 flex 的叠加层，并且无论屏幕宽度如何(除了移动尺寸)，它都保持其比例，因为一些文本会在顶部并且需要在始终为白色部分。

我一直在试验 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 borders 来复制效果，但似乎无法模拟该曲线。有疯狂的 css 边框印章的人能够提供帮助吗？

Answer 1

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

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

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

编辑:重读问题我仍然对你问的内容感到困惑。看来您可能正在寻找环绕曲线的文字？如果答案不是您要找的，请您澄清一下。