CSS3 Ribbons

I wrote this a long time ago and somewhere through my many redesigns it got a little bit lost off the main navigation. Looking back, this is a pretty solid solution but could certainly be improved upon by using the pseudo selectors and the content property. Worth a look either way.

[github src=”http://examples.sagalbot.com/ribbons/” height=”300″]

The Markup:

[code]
<div id="bg">
<h1>CSS Ribbons</h1>
</div>

<h2>Apparently, ribbons are 100% possible using only CSS 1 &amp; 2.</h2>
[/code]

The CSS

[code]
div#bg {
display: block;
width: 500px; height: 175px;
background-color: #e3e3e3;
border: 1px solid #bcbcbc;
margin: 0 auto;
position: relative;
}

div#bg:before,
div#bg:after {
padding: 0; margin: 0;
height: 0px; width: 0px;
position: absolute;
content: "";
border-style: solid;
border-width: 25px;
bottom: 29px;
z-index: -1;
}
div#bg:before {
border-color: transparent #0d123e transparent transparent;
left: -51px;
}

div#bg:after {
border-color: transparent transparent transparent #0d123e;
right: -51px;
}
[/code]

Leave a Reply

Your email address will not be published. Required fields are marked *