cssまたはsvgで一貫性と応答性のある曲線を作成する

灰色のbgの上にカーブしたオーバーレイを作成し、テキストのように画面の幅に関係なくその幅を（モバイルサイズを除いて）維持する必要があります。上に行くと、常に白いセクションにする必要があります。cssまたはsvgで一貫性と応答性のある曲線を作成する

私は、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の国境のチョップを持つ？

出典

2017-01-01 John

私たちにあなたのSVG実験を見せて、間違っていることを説明してください。 –

あなたのためにいくつかのsvgコードを追加し、問題を説明しました。 – John

「その比率を維持する」という意味は不明です。あなたは何を意味するのか正確に説明する必要があります。おそらく画像で。 –

あなたの質問を正しく理解していれば、画像は小さな画面にテキストサイズに収まるように縮小されていませんか？

もしそうなら、同じ背景色のテキストを含む画像の上にdivを配置し、その下に画像を配置するのが最善でしょう。同じ要素であるように見えますが、必要に応じて拡大して縮小します。あなたが私に例を提供したいなら、私はそうすることができます。

これは、イメージが単色のままの場合にのみ機能します。

編集：質問を再読み込みします。カーブを囲むテキストを探しているようですね。答えがあなたが探していたものでない場合は、謝罪することができます。

出典

2017-01-01 16:50:22

よくない、テキストは白の上にオーバーレイされ、上をたどらず、曲線を追跡しません。 – John

あなたはこれまでに何が得られたかを示すコードを与えることができますか？ –

cssまたはsvgで一貫性と応答性のある曲線を作成する

答えて

関連する問題