hello all.
i am sorry if this has been talked about on another topic, i have searched but i think i am having issues finding the solution because i am not 100% sure what its called and what to search for.
the easiest thing to do is show you this site built with wordpress and a page builder..
http://www.hawkmedia.co.uk/dev1/
The large top image of the cows has an overlay on the bottom thus showing the image with a curved bottom.
i am able to change the colours and type of curve inside the wordpress page builder.
how can i add this effect to an image within BSS?
to note, there is a downloadable block with a diagonal effect within BSS supplied from a user but i was looking to understand how i replicate the curves?
Many thanks
Carl
These are commonly being referred to in web development as "section dividers." They're used to break up the monotony of a single, solid background for a long page, and add some visual interest.
The one in your example is done using an SVG path, which would actually not be my preferred way of doing it because if you notice when you shrink browser width to simulate the page on smaller devices, the curve distorts vertically, rather than shrinking proportionately as the image does. I feel this is ugly.
But to answer your questions, there is no way to do this natively using the BSS built-in visual tools. You could easily do it with a custom code object, or a placed image, or even with CSS.
Personally, I'd create the curve in Illustrator, save it as an SVG, and then place it as an image in its own section. It get's a bit trickier when you want it to overlay it on a background image because then you have to adjust the vertical position in concert with the height of the background section, probably using some form of margin and vw rules. I might try to add it as an :after pseudo class. I'd have to experiment.
Another option is to just make the curve part of the image in an image editing program, but then you'd want the image to be responsive, which the one in your link is not.