Torn Edge CSS

This topic contains 1 reply, has 2 voices, and was last updated by  Sebastian 2 months, 1 week ago.

Author Posts

andrewpeters

Hey guys! I have a job that needs a kind of ‘torn edge’ on certain columns, kinda like a rough paper tear.

Like the orange column in this codepen, but using CSS whereas this guy is using ::after and an SVG.

https://codepen.io/randybruder/pen/odvRRK

Anyone have a snippet or insight on creating one of these and applying it sitewide to a col-class?


Sebastian

Hey Andrew,

I order to get a resolution that matches your codepen example, you might need to use a repeating background image. I found a pure CSS clip-path example but it’s not super realistic.

Cheers,
Sebastian

You must login or register to reply to this topic.