Penguin Flight Log

I thought a nice ribbon would give some 3D feel to the navigation for The Chemistry Book. The idea was to get a ribbon without adding an image but to use pure CSS rules. In this case, the before and after.

The following code was added to a child theme for Twenty Eleven.

#access {
    background-color: #000;
    border-top: 4px solid red;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    margin: 0 -20px 6px;
    width: 100%;
    padding-left: 40px;
}

#access:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -20px;
	top: 212px;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

#access:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: -20px;
	top: 212px;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 transparent transparent #666;
}