Создайте согласованную и отзывчивую кривую с помощью css или svg.

Question

Мне нужно создать криволинейное наложение поверх серого bg и сохранить его пропорции независимо от ширины экрана (кроме мобильного), так как некоторый текст будет пойдите сверху и должен быть на белом участке во все времена.

Я экспериментировал с 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 над изображением, содержащим текст того же цвета фона, с изображением, расположенным под ним. Он будет казаться одним и тем же элементом, но будет расти и сокращаться по мере необходимости. Если вы хотите, чтобы я привел пример, то могу.

Это будет работать, только если изображение остается сплошным.

Редактировать: перечитывая вопрос, я все еще путаю то, что вы спрашиваете. кажется, вы можете искать текст для обертывания вокруг кривой? Если бы вы могли прояснить извинения, если бы ответ был не тем, что вы искали.