Torn Edge CSS

This topic has 1 reply, 2 voices, and was last updated 5 years, 7 months ago by Sebastian.

Author	Posts

andrewpeters September 6, 2019 at 5:06 pm	Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date. 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 September 8, 2019 at 9:39 am	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

Author

Posts

andrewpeters September 6, 2019 at 5:06 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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 September 8, 2019 at 9:39 am

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.

Support