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 занудам за внимание.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html