Want To Create a Pure CSS Ribbon?

It’s getting to the point where the web is expanding its boundaries farther than ever before. It seems like just a few short years ago, we used images for everything. If you wanted creative type on the web, you created it in Photoshop. Then, you sliced it up and brought it into html. CSS was limited, and we had to use tables. Then, we developed CSS to create a consistent structure for websites. We’re still improving the web ever day. It turns out that if you’re creative, you can create some shapes with CSS. I created a ribbon, using simple CSS and transparent borders. Let’s take a look at the outcome of a pure CSS ribbon.

pure css ribbon

Created within the Bootstrap framework, it spans the width of 4 columns. The whole things is basically 3 separate sections. The content before and after css creates the angled ribbon effect. I created various tints and shades of the signature WDF purple. I used subtle CSS gradients, which are a pain. You could use flat variations if you wanted to, which would produce the same effect.  You can change the color values to match your own brand. You’ll need to change the border color to a matching color, too. You can view a live demo of the ribbon here.

Want to see the source files and see how it works? I put them together for you in a neat little package. Click the link below to download the source files. You’ll also gain access to future source files, too.



Is there something you’d like to know how to do in CSS? Send me an email via the contact form. I’ll create a tutorial on how to do it. Sometimes you just have to look at the pieces of something to understand how it works as a whole.