The other day I was thinking that I quite liked these little ribbon things that people add to their images, so I put together this little tutorial on how to make your own. I came up with a few ideas, but they honestly didn’t look right without the use of images. This CSS only ribbon fits on most images and can be integrated easily into existing code.

Usage

Often these are used for when you want to identify something as ‘new’ or ‘popular’, and they can just clip straight onto most images. All we have to do is create one block for the text, rotate it, and then use two triangle borders to create the clip on effect. This will all take place within a div.

HTML

So this is what the code is going to look like. It’s not that hard, so it shouldn’t be difficult to implement.

<div class="side-corner-tag">

	<img src="1.jpg" alt="" />
	<p><span>newest</span></p>
	
</div>

Pretty simple. It’s best to keep markup to a minimum when creating these CSS effects, because it can be ever so complicated otherwise. We can usually fill in the gaps with :before and :after anyway. Lets take a look at the CSS.

The CSS

So we want to remove any overflow and add some padding to our main div. This is the crux of our effect. We also need to add some font properties, and change the display to inline-block.

	.side-corner-tag {
		position: relative;
		color: #fff;
		display: inline-block;
		padding: 5px;
		overflow: hidden;
		font-family: Arial, sans-serif;
		font-weight: 900;
	} 

	.side-corner-tag p {
		display: inline;	
	}

Then we need to style the p element. This will act as the text area for our tag. We define a width and rotate. 2D Rotates work in the latest versions of all browsers, so support shouldn’t be an issue so roughly 75% of people should be able to view it fine. If you are considering using this you might want to make it display: none using Javascript or IE specific stylesheets. Then we have to add some padding for room and a little box shadow to give a gradient effect. Don’t forget to position it on the correct side.

	.side-corner-tag p span {
		position: absolute;
		display: inline-block;
		right: -25px;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
		text-align: center;
		text-transform: uppercase;
		top: 22px;
		background: #d93131;
		width: 100px;
		padding: 3px 10px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	} 

Finally add some border triangles using before and after, and position them correctly to create the effect that the tag is being folded over the image. Oh and don’t forget to change the z-index.

	.side-corner-tag p:before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: -17px;
		right: 69px;
		z-index: -1;
		border: 17px solid;
		border-color: transparent transparent #662121 transparent;
	}
	
	.side-corner-tag p:after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: 74px;
		z-index: -1;
		right: -10px;
		border: 17px solid;
		border-color: #662121 transparent transparent transparent;
	}

Voila! We’re done. Here’s the combined CSS for those of you who are a little bit lazier than most:

	.side-corner-tag {
		position: relative;
		color: #fff;
		display: inline-block;
		padding: 5px;
		overflow: hidden;
		font-family: Arial, sans-serif;
		font-weight: 900;
	} 
	
	.side-corner-tag span p {
		position: absolute;
		display: inline-block;
		right: -25px;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
		text-align: center;
		text-transform: uppercase;
		top: 6px;
		background: #d93131;
		width: 100px;
		padding: 3px 10px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	} 
	
	.side-corner-tag span:before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: -17px;
		right: 69px;
		z-index: -1;
		border: 17px solid;
		border-color: transparent transparent #662121 transparent;
	}
	
	.side-corner-tag span:after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: 74px;
		z-index: -1;
		right: -10px;
		border: 17px solid;
		border-color: #662121 transparent transparent transparent;
	}