Css ribbon

by someprimetime

HTML

<p class="ribbon"></p>

CSS

.ribbon {
 width: 0;
 position: relative;
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:after {
 content: "";
 position: absolute;
 display: block;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:after {
 border-left-width: 1.5em;
 border-right-color: transparent;
}