Dan's Ribbons

Pure CSS, Folded Corner Ribbons

by screenmutt

HTML

<section>
    <h1>Dan's Ribbons</h1>
    <h2 class="left yellow">Pure CSS</h2>
    <h2 class="right red">No Images</h2>
    <h2 class="left green">No Extra Tags</h2>
</section>

CSS

/* -- Non-Ribbon Styles -- */
body {
    background: #111;
    color: #111;
    font: normal 1em sans-serif;
    margin: 2em;
}

section {
    background: #FFF;
    padding: 1em 0;
}

h1 {
    font-size: 2em;
    padding: 0.5em 0;
}

/* -- Ribbon Styles -- */
h1, h2 {
    background: #D6E6F0;
    margin: 0 -0.5em 1em;
    padding-left: 1em;
    padding-right: 1em;
    position: relative; /* Allows position: absolute; for content */
    text-align: center;
}

h1:before, h2:before,
h1:after, h2:after {
    content: '';
    border-top: 0.5em solid #547BA2; /* Triangle is created by border */
    bottom: -0.5em;
    height: 0;
    width: 0;
    position: absolute; /* Used to position inside of header */
}

h1:before, h2:before {
    border-left: 0.5em solid transparent; /* Causes the triangle */
    left: 0;
}

h1:after, h2:after {
    border-right: 0.5em solid transparent; /* Causes the triangle */
    right: 0;
}

.left         { margin-right: 0; text-align: left; }
.left:after   { display: none;   }
.right        { margin-left: 0;  text-align: right; }
.right:before { display: none;   }

.yellow { background-color: #FFE6BA; }
.yellow:before, .yellow:after { border-top-color: #DAAB67; }

.red { background-color: #FFBFBA; }
.red:before, .red:after { border-top-color: #FD5F6E; }

.green { background-color: #CDFFBA; }
.green:before, .green:after { border-top-color: #474D1E; }