0

I've got to create a curved overlay on top of an a grey bg and for it to maintain its proportions no matter the screen width (apart from mobile size) as some text will go on top and needs to be on the white section at all times.

enter image description here

I have been experimenting with svg images but cannot achieve the consistent proportions across any screen size.

If I create an svg that is too long, it's too shallow at anything other than 5k screen size:

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 I have been trying css borders to replicate the effect but cannot seem to emulate that curve. Anyone with mad css border chops able to assist?

vals
  • 61,425
  • 11
  • 89
  • 138
John
  • 833
  • 1
  • 11
  • 24

1 Answers1

0

If I'm understanding your question correctly, your image isn't scaling down to fit the text size on smaller screens?

If so, it would probably be best to have a div above the image containing the text of the same background colour, with the image placed beneath it. It will appear to be the same element but will grow and shrink as needed. If you'd like me to provide an example then I can.

This will only work if the image stays a solid colour.

Edit: rereading the question im still confused what you wetr asking. it seems you may be looking for the text to wrap around the curve? If you could clarify apologies if the answer wasn't what you were looking for.

Niall Walker
  • 155
  • 1
  • 12