Как создать параллелограмм на CSS

Как создать параллелограмм на CSS

Проблема

Параллелограммы — это расширенная версия прямоугольников: их стороны параллельны, но углы не обязательно прямые. В визуальном дизайне они часто используются для придания оформлению динамичности и передачи ощущения движения.
Давайте попробуем создать ссылку, оформленную с помощью CSS в стиле скошенной кнопки. Нашей отправной точкой будет обычная плоская кнопка с очень простым оформлением. Форму скошенного прямоугольника мы придадим ей с помощью трансформации  skew(), (о трансформациях в css я писал здесь) вот так:
transform: skewX(-45deg);
Однако в результате этого содержимое кнопки также исказилось, стало некрасивым и нечитаемым. Существует ли способ создавать скошенные контейнеры так, чтобы их содержимое при этом не перекашивалось?

как создать параллелограмм на CSS

 

 Решение с вложенными элементами

Для получения желаемого результата мы могли бы применить к содержимому трансформацию, противоположную  skew() , которая отменит внешнюю трансформацию. К сожалению, это означает, что нам придется использовать дополнительный элемент HTML в качестве обертки содержимого, например  div:

Параллелограммы в веб-дизайне (автор дизайна — Мартина Питакова)
HTML
<a href=»#yolo» class=»button»>
<div>Click me</div>
</a>

CSS
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg) }
Как видно этот подход работает, но требует дополнительного элемента HTML. Однако не следует беспокоиться, если изменение разметки для вас неприемлемо или же если вы действительно стремитесь к сохранению чистоты разметки, — существует также решение на чистом CSS.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/parallelograms

Наша кнопка до применения каких-либо трансформаций


Наша скошенная кнопка, текст на которой трудно прочитать

Решение с псевдоэлементом

Еще одна идея — создать псевдоэлемент, к которому будут применены все стили (фоны, рамки и т. п.), а затем трансформировать его. Так как наше содержимое не принадлежит псевдоэлементу, трансформация на него распространяться не будет.

Читайте также  Как сделать вкладки в форме трапеций

Попробуем применить эту технику для стилизации ссылки так, как в предыдущем разделе. Нам нужно, чтобы поле нашего псевдоэлемента оставалось гибким и автоматически наследовало габаритные размеры своего предка, даже когда они определяются содержимым. Самый простой способ добиться этого — применить  position: relative к предку, а к сгенерированному содержимому — position: absolute и сделать все смещения нулевыми, чтобы оно растягивалось по горизонтали и по вертикали до размеров своего предка. Вот как будет выглядеть требуемый код:
.button {
position: relative;
/* цвет текста, забивки и т. п. */
}
.button::before {
content: »;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Пока что сгенерированное поле отображается над содержимым, заслоняя его, и как только мы определяем для него какой-то фон, содержимое становится невидимым. Чтобы исправить это, применим  z-index: -1 к псевдоэлементу, для того чтобы он переместился ниже своего предка.

После этого наконец-то можно применить к псевдоэлементу требуемые трансформации и наслаждаться результатом. Итоговый вариант кода показан далее; он обеспечивает тот же самый визуальный результат, что и предыдущая техника:
.button {
position: relative;
/* цвет текста, забивки и т. п. */
}
.button::before {
content: »;  /* чтобы сгенерировать поле */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
Если вы применяете этот эффект к элементу, который по умолчанию является строковым (inline), то не забудьте установить для него другое значение свойства display, например inline-block или block, иначе трансформация применена не будет. То же самое касается и внутреннего элемента.

Конечный результат

Наш псевдоэлемент в настоящее время находится выше своего содержимого, поэтому применение к нему background: #58a приводит к тому, что увидеть содержимое становится невозможно
Эти техники полезны не только при применении трансформации  skew() . Их можно использовать с любыми другими трансформациями, для того чтобы менять форму элемента, не воздействуя на его содержимое.

Читайте также  Как срезать углы на css

Например, применив вариацию данной техники с трансформацией  rotate() к квадратному элементу, вы с легкостью создадите ромб. Кроме того, идея использовать псевдоэлементы и позиционирование для генерации поля, которое затем стилизуется и помещается под своего предка, может пригодиться во множестве других ситуаций для создания самых разных типов эффектов, например: данную технику часто использовали в качестве обходного пути при добавлении нескольких фонов в IE8 (автор техники — Николас Галлахер (Nicolas Gallagher); это может быть еще одним решением для создания эффектов, подобных описанному в секрете «Внутреннее скругление». Догадаетесь почему? с помощью этой техники можно независимо применить свойства, подобные opacity , к «фону», что также впервые воплотил Николас Галлахер.

Она предоставляет более гибкий способ имитации нескольких рамок на случай, если вы не можете применить техники из секрета «Несколько рамок». Например, когда вам требуется несколько пунктирных рамок или несколько рамок с пустым пространством, заполненным прозрачными пикселами, между ними.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/parallelograms-pseudo

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: