Creating a Ribbon using HTML and CSS

A couple of weeks ago, I have stumbled upon this tutorial on how to create arrows using plain CSS & HTML and was kind of dumbfounded. I realized maybe we turn a little too much into Photoshop and other drawing tools these days that we forget the things we can actually accomplish with CSS & HTML alone. Of course one can argue that it’s easier to create arrow images but let us set that aside for now.

I thought of creating something similar; a ribbon using plain CSS & HTML. No not the bow. I’m pertaining to the ribbon we usually use as bookmark symbol, or an indicator of something we can click or pull down in our websites.

Below is my HTML code. I simply named the top part of our ribbon, “ribbon-head”, and the snake tongue-looking bottom part as the “ribbon-tail”.

<div id="ribbon-head">
 <h1>Ribbn</h1>
</div>
<div id="ribbon-tail">
 <div id="left"></div>
 <div id="right"></div>
</div>

Below is my CSS code.

/* head */
#ribbon-head { display: block; background-color: red; width: 100px; height: 100px; }

/* text */
h1 { font-family: 'Impact'; color: #fff; text-align: center; padding-top: 33%; }

/* tail */
#ribbon-tail { display: table-row; }
#left, #right { display: table-cell; border-top: 50px solid red; border-bottom: 50px solid transparent; height: 0px; width: 0px; }
#left {  border-left: 50px solid red; }
#right { border-right: 50px solid red; }

The codes shall give you something like the ribbon below.

I honestly haven’t thought about this a lot so feel free to comment your ideas on how this can be improved. -aB