Streaming live at 10am (PST)

Creating Wraparound Ribbon with CSS

I’m curious if it would be possible to use Webflows CSS to create ribbon banners like this:

Webflow doesn’t support :before and :after psuedo selectors quite yet (it’s in our roadmap). But you can definitely create this effect without these selectors.

What you can do is create a wrapper outside of the negative-margined container, and give that wrapper position:relative and a bottom padding of around 10px. Then you can absolutely position those corner graphics on the bottom left and right corners. You can also try to create those triangles using border.

@thesergie Thanks! I was able to create it pretty painlessly using the border function and triangles.

Awesome I’m glad it worked out!