Add a date header ribbon

Here we'll add a date header ribbon that wraps around the edge of the container. This effect is specific to a Two-Column-Right layout (since the ribbon wraps around the content edge on the left):

h2.date-header { position: relative; width: 40%; font-size: 1.3em; font-weight: bold; padding: 7px 20px 7px 25px; margin: 0 10px 25px -30px; color: #555; background-color: #eee; text-shadow: 0px 1px 2px #bbb; -webkit-box-shadow: 0px 2px 4px #888; -moz-box-shadow: 0px 2px 4px #888; box-shadow: 0px 2px 4px #888; } h2:before, h2:after { content: ' '; position: absolute; width: 0; height: 0; } /* wrap */ h2.date-header:after { left: 0px; top: 100%; border-width: 5px 5px; border-style: solid; border-color: #666 #666 transparent transparent; }

You can make the ribbon stretch across the full content area by using the code above and changing the width:

/* Ribbon width */ h2.date-header { width: 100%; }

Change the color:

/* Ribbon color */ h2.date-header { background-color: khaki; }

Add a flag on the end:

/* flag */ h2.date-header:before { left: auto; right: -2px; top: 0px; border-width: 20px 10px; border-style: solid; border-color: transparent #fff transparent transparent; }

Code thanks to RedTeamDesign and adapted to paste into TypePad.