Как создать ленту CSS

Мы также установили основные размеры и фоновый цвет с CSS.

 .карточка цвет фона: бежевый; высота: 300 пикселей; поле: 40px; ширина: 500 пикселей;  

Средняя часть ленты

Мы будем использовать Переменная CSS (позволяет нам хранить и повторно использовать значение CSS) --п в сохранить значение отступа. Значение набивка свойство использует вар (- р) синтаксис для левого и правого отступов ленты, так что это может быть легко расширяется. --п переменная позже будет повторное использование несколько раз; это делает наш код гибким.

 .лента --p: 15 пикселей; цвет фона: RGB (170 170 170); высота: 60 ​​пикселей; отступ: 0 вар (- р); ширина: 100%;  

На скриншоте ниже вы можете увидеть, как ваша демоверсия должна выглядеть на данный момент:

Центрирование ленты

Нам также нужно центрировать ленту. Мы толкнуть влево на размер отступа (отмечено --п переменная) с использованием относительного позиционирования.

 .лента --p: 15 пикселей; цвет фона: RGB (170 170 170); высота: 60 ​​пикселей; отступ: 0 вар (- р); положение: относительное; справа: var (- p); ширина: 100%;  

Обновленная демка:

Стороны ленты

Теперь мы создаем левая и правая стороны ленты это, казалось бы, должно огибать край карты. Для этого мы используем оба :до а также :после псевдоэлементы .лента.

Оба псевдоэлемента наследуют цвет фона .лента, и мы используем фильтр: яркость (.5) Правило немного затемнять их цвет. Они также абсолютно позиционируется в пределах своего (относительно расположенного) родителя.

Их ширина должна быть такой же, как размер отступа, и мы размещаем их на левый и правый концы ленты с использованием осталось: 0 а также справа: 0 правила стиля.

 .лента: до, .риббон: после фоновый цвет: наследовать; content: "; display: block; filter: яркость (.5); высота: 100%; позиция: абсолютная; ширина: var (- p); .ribbon: before left: 0; .ribbon: after  справа: 0; 

Теперь лента с добавленными сторонами выглядит так:

Наклонить стороны

Чтобы сделать стороны ленты выглядеть согнутым, мы должны перекосить стороны на 45 °. transform: skewy () Правило CSS наклоняет элементы по вертикали.

 .лента: перед слева: 0; преобразование: skewy (45deg);  .ribbon: после справа: 0; преобразование: skewy (-45deg);  

Как вы можете видеть края сторон не выравнивать после преобразования, поэтому нам нужно потяните их вниз.

Выровняйте стороны

к определить правильную длину с помощью которого нам нужно переместить стороны вниз, мы переходим к тригонометрии. Что нам нужно найти, так это Икс, как Y ширина сторон (равна размеру отступа .лента) и угол θ 45 ° (угол перекоса).

Результирующий Икс затем нужно вдвое, так как есть левая и правая сторона, а также.

Если вы используете какой-либо препроцессор CSS, проверьте, имеет ли он загар функция, в противном случае обратитесь к касательной диаграмме или калькулятору узнать значение тангенса угла. Нам повезло как загар 45 ° является 1, Это означает, что значение Икс равно Y в нашем случае.

 .лента: до, .риббон: после фоновый цвет: наследовать; content: "; display: block; filter: яркость (.5); высота: 100%; позиция: абсолютная; top: calc (var (- p) / 2); ширина: var (- p); 

поскольку Икс пришлось вдвое, мы используем Вычислено () Функция CSS для выполнения деления --п переменная.

Наконец нам нужно выровнять стороны вдоль оси Z так что давайте добавим z-индекс: -1 править в стороны, чтобы разместите их за средней частью ленты.

 .лента: до, .риббон: после фоновый цвет: наследовать; содержимое: "; дисплей: блок; фильтр: яркость (.5); высота: 100%; положение: абсолютное; верх: calc (var (- p) / 2); ширина: var (- p); z- индекс: -1; 

Теперь, когда мы выровняли стороны, наша CSS-лента готова.

Ниже вы можете снова посмотреть живую демоверсию, обратите внимание, что она также использует некоторые дополнительные стили.