Skip to Content

Here’s a little ribbon that can be completely made without using images. Nice if you want to draw a little attention to something.

Hi. I am not an image.

HTML

<div id="ribbon">
	<p>Hi. I am not an image.</p>
</div>

CSS

div#ribbon {
	width:8em;
	padding:3em 0 2em 0;
	margin:0;
	text-align:center;
	font-size:1.3em;
	text-align:center;
	color:#fff;
	text-shadow:1px 1px 4px rgba(0,0,0,0.5);
	background: #a90329; /* old browsers */ 
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* firefox */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019)); /* webkit */  
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=0 ); /* ie */
	position:relative;
}
div#ribbon:after {
	content: " ";
	display:block;
	width:0;
	overflow:hidden;
	border-top:1.5em solid #6d0019;
	border-right:4em solid #fff;
	position:absolute;
	bottom:-1.45em;
	left:0;
}
div#ribbon:before {
	content: " ";
	display:block;
	width:0;
	overflow:hidden;
	border-top:1.5em solid #6d0019;
	border-left:4em solid #fff;
	position:absolute;
	bottom:-1.45em;
	right:0;
}