I have been asked to create a website page that each vertical block has a sine wave like shape top and bottom.
However on this occasion the blocks have background images or videos and the content will vary so the height would need to fit content. As a result the block would probably need to be a single element with a shaped top and bottom edges.
Ideas would be appreciated.
See the design below
Web-page design which will need to be responsive
Previously I have achieved similar using pseudo elements to add clipped blocks to the top and bottom ('before' and 'after') of the element which works a treat with plain coloured backgrounds.