The effect can be done with a combination of CSS and an image via the border-image property.
The image may be SVG or otherwise, so long as it has the rough edge look you want.
Border image can be tricky to set up, but there is info here:-
I just took a look at the tutorial, actually cut to the chase and looked at the Codepen example and I don’t see why it shouldn’t work like that without any image file.
Interesting that you can apply the effect to other HTML elements like text too by adding the class.
Thank you for this. But is there a way I can do that in pure CSS? or should I just use the image as background for the container and the button instead.
One thng to be aware of, to use that div as an actual conatiner for your content, you probably don’t want to apply that turbulence to the container itself. If you do it will distort the content inside, so use a pseudo element like my example.
Obviously you can’t match the psd exactly as that’s just something someone has drawn as a fixed shape and the web is not a fixed shape. It needs to stretch with content and be responsive.
As you mention you could do this with an image (or border-image (multiple border images) to allow it to scale nicely) and as the images are cut from the PSD they will look much the same.
If it were me I’d just fiddle with the svg until its close.
Here was my attempt.
This is an example using a (PNG) border-image. It only requires a single image, but there is a bit of work setting the image up to work correctly. It must have the element fill texture in the middle, which will tile seamlessly at the slice point, the all 4 sides with alpha channel, which must also tile at the same slice point, then all 4 corners which must tile also.
It is fully responsive with the image scaling to a size where an integer number of tiles with fit the element size.
Luckily I had the image already prepared having previously used it in a site.
But the trick here is to have the image prepared to properly tile and setting the slice value to the tile edge.