Archived topic
SVG Wave 🌊 shapes. Can they be placed on left or right of a container?
5 replies · Started by Ema on April 3, 2021
Hello, is there a way to to create a hero which is divided vertically by a wave shape?
I've tried creating hero container - setting the grid to 50% 50% - adding photo image to right (or left) column then the SVG image on the left to create a wavy divide in the middle
See here
I'm wondering if I can set image to background. Then add the .SVG to one half of the image (which has the wave shape)
Which is ok, but I need a further text layer on top of the .svg.
I can cut a wave shape into the image and save as .png - but the quality isn't as good.
Should I use a clipping mask?
I love the new wave shapes in GP ! but I just need them on the left or right. Typical :-D
Any advice most appreciated
Hi Ema,
It's a very interesting idea.
I think it's doable, but it might cause some responsive issues down the road.
I would suggest the a structure like this:
https://www.screencast.com/t/Hi8fzNrBGLw
1. Add the background image to container A.
2. Add the shape to container A-2.
Once it's done, you could link us to your site, then we can try some CSS solutions.
Let me know :)
Hi Ying,
Thanks so much for getting back to me.I really appreciate it.
I have placed the images in as you recommended (I think I will have to have to rejig the background image a bit) - but it's just to get an idea of how to structure it. (I shall be making the wave less curved - and more subtle as I think this would work better)
My example image is here
The link to site is here
I also tried to achieve this the photoshop way - just cutting out the wave and placing this in the right column - with the illustrated background filling the whole container. But there is some responsive issues. You can see this example here -
Thanks Ying
Best Ema
Actually, I think the photoshop way is better, it even doesn't require CSS.
I tried adjusting the paddings and background image position, it looks like this when screen shrinks.
https://www.screencast.com/t/knPcQIn7u
To achieve it, you'll set the two grid containers to 50% in width both on desktop and tablet, if you want it to keep the look for mobile as well, do the same for mobile too.
Then set the background image position to left center instead of center center.
Let me know if it works :)
Hi Ying,
Yes this is much better.Simply adding 'left centre'!
One more quick query on this, as I am trying to avoid using .png for images (but will if I have to)
Would it be possible to: place the image (photo) as the full width of the container 100% (set to background)
Then, add grid 50% + 50% on top.
Then add a svg. mask for the shape in the left container.
Could I put a further layer of text on top of the svg mask?
🤔
Thank you so much for all your help so far.
Best Ema
I checked your test site, very nicely done, but it's better to set the SVG background image position to right center in this case.
Then adjust the container paddings according to different devices. :)
