Streaming live at 10am (PST)

Creating Wraparound Ribbon with CSS


#1

I'm curious if it would be possible to use Webflows CSS to create ribbon banners like this: http://asgeirhoem.no/ex/css-wraparound-ribbon/


#2

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.


#3

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


#4

Awesome I'm glad it worked out!


#5