Как сделать загнутые уголки на CSS3 без картинок

6 мая 2022

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

Загнутые уголки были популярны в течение нескольких лет. Пользователь видел естественно выглядящее слегка изогнутое поле, на деле же это оптическая иллюзия созданная тенью в нижней части элемента.

 

Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.

К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми преимуществами.

• Эффект работает в современных браузерах, но не будет применяться в браузерах, которые его не поддерживают.
• Тени могут быть наложены на любой фон без дополнительных изображений.
• Эффект применяется к элементам любого размера.
• Используемый код занимает намного меньше байт, чем рисунок тени.
• Тень легко настраивается. Вы можете изменить цвет или глубину небольшой модификацией кода.

Для начала давайте создадим наш единственный HTML-элемент:

<div class="box">My box</div>

и добавим небольшую тень внутри и снаружи.

.box {
    position: relative;
    width: 500px;
    padding: 50px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

Теперь нам нужен эффект загнутости на нижнем левом и правом краях. Это достигается путем создания двух псевдоэлементов :before и :after, которые:

1. поворачиваются и наклоняются с помощью трансформации CSS3 (все последние версии браузеров поддерживают трансформацию с вендорными префиксами);
2. позиционируются по нижнему краю;
3. отбрасывают тень.

Теперь мы можем переместить элементы за основной блок с помощью z-index: -1. Получается, что становятся видны только края тени.

CSS-код для псевдоэлементов.

.box:before, .box:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: -1;
}
.box:after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}