Mojo Ribbon — идеальная лента или тригонометрия в LESS

Доброго времени суток уважаемые хабражители. Недавно в одном проекте мне потребовалось сделать ленточку для блоков. Для примера: очень часто сверху делают ленту с надписью «Fork me on GitHub» или же над каждым элементом в портфолио присутствует лента с датой публикации работы. Лучше покажу пример с официального сайта LESS, так как речь идет о такой маленькой детальке, на которую некоторые могли вообще не обратить внимание.



Данный Ribbon — это изображение внутри ссылки с абсолютным позиционированием. Чем меня не устраивает данный вариант? Во-первых: я очень люблю современные стандарты CSS, с помощью которых можно создать приятный дизайн, используя минимум изображений, а в данном случае лентой может быть обычный блок с transform rotate. Во-вторых: с недавнего времени я смотрю на веб сквозь Retina дисплей и неоптимизированные img сразу же бросаются в глаза, но и разработчикам обращать внимание на какую то ленточку, оптимизировать ее отображение с media queries, мне кажеться, даже немного смешно.

Создадим блок длинной 500px, высотой 50px, с абсолютным позиционированием, сверху, слева. Получится то, что мы видим на изображении ниже в левой части. Далее, повернем блок на -45 градусов, чтобы у нас получилось что-то похожее на Ribbon с LESS. Результат показан в правой части изображения. Наш элемент вращается от своего центра, вследствие чего получается отступ слева, а часть будущей ленты выезжает за рабочую область.



С помощью инспектора мы можем подобрать нужные нам значения для top и -left. Чем меня не устраивает данный вариант? Во-первых — перфекционизм: я хочу, чтобы максимальное количество указанных пикселей (в данном случае 500) отображалось в рабочей области и не выезжало за нее. Во-вторых — лень: я не хочу при изменении позиции (top, right, bottom, left) и градуса наклона вручную подбирать значения, чтобы спрятать все углы.

Геометрия

Как я и сказал, поворот элемента выполняется от центра. Следовательно, и значения отступов измеряются от края рабочей области до центра. Мысленно представим образующиеся фигуры — треугольники, стороны которых нам необходимо вычислить:


Получилось два треугольника ABC и A2B2C2, стороны которых нам необходимо вычислить. Нам известно, что С = 500px (width), С2 = 50px (height), угол наклона -65 (deg), следовательно, угол a в треугольнике ABC равен 65 градусам, а угол b — 25 градусам (180 — 90 — 65). В треугольнике A2B2C2 углы a2 и b2 равны 65 и 25 градусам соответственно.

Тригонометрия

Все просто. Синус угла равен отношению противолежащего катета к гипотинузе. Следовательно:

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

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

LESS

.MojoRibbon(@width, @height, @deg, @valign) {
	width: @width;
	height: @height;
	-webkit-box-sizing: border-box;  /* Что бы высота не изменялась при padding */
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	.defineDegree(@deg, @valign) when (@deg < 0) and (@valign = top) {
		@degree: -@deg;  /* Угол треугольника неотрицательный, вычисляем правильный  sin */
		top: @countHeight;
		left: @countWidth;	
		-webkit-transform: rotate(@deg);
		-moz-transform: rotate(@deg);
		-o-transform: rotate(@deg);
		-ms-transform: rotate(@deg);
		transform: rotate(@deg);
	};
	.defineDegree(@deg, @valign) when (@deg < 0) and (@valign = bottom) {
		@degree: -@deg; /* Угол треугольника неотрицательный, вычисляем правильный  sin */
		bottom: @countHeight;
		right: @countWidth; /* Если угол поворота отрицательный и в вертикали объект позицианируется по нижнему краю, логически правильно в горизонтали позицианировать его по правому краю */
		-webkit-transform: rotate(@deg);
		-moz-transform: rotate(@deg);
		-o-transform: rotate(@deg);
		-ms-transform: rotate(@deg);
		transform: rotate(@deg);
	};
	.defineDegree(@deg, @valign) when (@deg > 0) and (@valign = top) {
		@degree: @deg;
		top: @countHeight;
		right: @countWidth;
		-webkit-transform: rotate(@degree);
		-moz-transform: rotate(@degree);
		-o-transform: rotate(@degree);
		-ms-transform: rotate(@degree);
		transform: rotate(@degree);
	};
	.defineDegree(@deg, @valign) when (@deg > 0) and (@valign = bottom) {
		@degree: @deg;
		bottom: @countHeight;
		left: @countWidth;  /* Если угол поворота положительный и в вертикали объект позицианируется по верхнему краю, логически правильно в горизонтали позицианировать его по левому краю */
		-webkit-transform: rotate(@degree);
		-moz-transform: rotate(@degree);
		-o-transform: rotate(@degree);
		-ms-transform: rotate(@degree);
		transform: rotate(@degree);
	};
	.defineDegree(@deg, @valign) when (@deg = 0) {
		@degree: @deg;
		top: 0;
		left: 0;
	};
	.defineDegree(@deg, @valign);
	@angleB: 90-@degree;
	@angleB2: @angleB;
	@sideA: round(sin(@degree), 3)*@width; /* Сторона А */
	@sideB: round(sin(@angleB), 3)*@width; /* Сторона B */
	@sideB2: round(sin(@angleB2), 3)*@height;  /* Сторона А2 */
	@sideA2: round(sin(@degree), 3)*@height; /* Сторона B2 */
	@countHeight: @sideA/2 - @height/2 - @sideB2/2;
	@countWidth: -((@width)-(@sideB))/2 - @sideA2/2;	
}

Демо результата
GitHub

Большое спасибо всем таким же, как и я CSS занудам за внимание.