Erstellen konsistente und reaktionsschnelle Kurve mit CSS oder Svg

Ich muss eine gekrümmte Überlagerung auf einem grauen bg erstellen und für seine Proportionen unabhängig von der Bildschirmbreite (abgesehen von der mobilen Größe) als etwas Text beibehalten gehe an die Spitze und muss immer auf dem weißen Bereich sein.Erstellen konsistente und reaktionsschnelle Kurve mit CSS oder Svg

Ich habe mit SVG-Bildern zu experimentieren, aber die konsistenten Proportionen über jede Bildschirmgröße nicht erreichen kann.

Wenn ich ein svg erstellen, die zu lang ist, ist es zu flach auf etwas anderes als 5k Bildschirmgröße:

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>

So habe ich CSS Grenzen versucht, den Effekt zu replizieren, aber kann diese Kurve nicht nachzuahmen scheinen. Jeder mit tollen Css Border Chops kann helfen?

Quelle

2017-01-01 John

Zeigen Sie uns Ihre SVG-Experimente und beschreiben Sie, was mit ihnen nicht stimmt. –

Hinzugefügt svg Code für Sie und erklärte das Problem. – John

Es ist unklar, was Sie meinen, "behalten Sie ihre Proportionen bei". Sie sollten genau erklären, was Sie meinen. Vielleicht mit Bildern. –

Wenn ich Ihre Frage richtig verstanden habe, verkleinert sich Ihr Bild nicht auf die Größe des Textes auf kleineren Bildschirmen?

Wenn dies der Fall ist, ist es wahrscheinlich am besten, ein Div über dem Bild zu haben, das den Text derselben Hintergrundfarbe enthält, mit dem Bild darunter. Es scheint das gleiche Element zu sein, wird aber nach Bedarf wachsen und schrumpfen. Wenn Sie möchten, dass ich ein Beispiel gebe, kann ich es tun.

Dies funktioniert nur, wenn das Bild eine Volltonfarbe bleibt.

Edit: die Frage noch einmal gelesen, bin immer noch verwirrt, was du fragst. es scheint, dass Sie nach dem Text suchen, um die Kurve zu wickeln? Wenn Sie sich entschuldigen könnten, wenn die Antwort nicht das ist, was Sie gesucht haben.

Quelle

2017-01-01 16:50:22

Nun, nein , der Text wird nur über dem Weiß überlagert, nicht über und verfolgt nicht die Kurve. – John

Könnten Sie etwas Code geben, um zu zeigen, was Sie bisher haben? –

Erstellen konsistente und reaktionsschnelle Kurve mit CSS oder Svg

Antwort

Verwandte Themen