使用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創建一致的響應曲線

回答

相關問題