MojoRibbon

DEMO: http://netcribe.com/MojoRibbon

This Ribbon is an image inside a link with position: absolute. Why I don't like this option? First: I love the modern standards of CSS, with which you can create nice design, using a minimum of images, as in this case, the ribbon can be a HTML block with the transform: rotate. Secondly: recently, I look on the web through the Retina display and sub-optimal img immediately catch the eye, but the developers to pay attention to what the ribbon, optimize their display with media queries, it seems to me, even a little bit funny.

I am a perfectionist and I'm lazy :) So I create geometrically correct LESS ribbon snippet:

A = sin(a) * C or A = sin(65) * 500;
B = sin(b) * C or B = sin(25) * 500;

A2 = sin(a2) * C2 or A2 = sin(65) * 50;
B2 = sin(b2) * C2 or B2 = sing(25) * 50;

Usage:

.ribbon {
  .MojoRibbon(@width: 500px, @height: 50px, @deg: -45deg, @valign: top);
	display: inline-block;
	background-color: #cc0000;
	position: absolute;
	z-index: 5;
	box-shadow: 0 0 10px #000;
}

<a href="https://github.com/Pestov/MojoRibbon" class="ribbon"> Fork me on Github</a>