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

Question

我必须在灰色bg的顶部创建一个弯曲的叠加层，并保持其比例，无论屏幕宽度如何（除了移动尺寸），因为有些文字会在顶部显示，需要在任何时候都在白色部分。

我一直在试验svg图像，但无法在任何屏幕尺寸上达到一致的比例。

如果我创建一个太长的svg，除了5k屏幕尺寸之外的其他任何东西都太浅了：

＆＃13;

＆＃13;

body {
  background-color: gray;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

所以我一直在尝试使用css边框来复制效果，但似乎无法仿效该曲线。疯狂的css边界排骨的人能够提供帮助吗？

Answer 1

如果我正确理解您的问题，您的图片不会缩小以适应较小屏幕上的文字大小？

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

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

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