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

Оцените материал
(0 голосов)

Проблема

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

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

Для получения желаемого результата мы могли бы применить к содержимому трансформацию, противоположную  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() . Их можно использовать с любыми другими трансформациями, для того чтобы менять форму элемента, не воздействуя на его содержимое. Например, применив вариацию данной техники с трансформацией  rotate() к квадратному элементу, вы с легкостью создадите ромб. Кроме того, идея использовать псевдоэлементы и позиционирование для генерации поля, которое затем стилизуется и помещается под своего предка, может пригодиться во множестве других ситуаций для создания самых разных типов эффектов, например: ‰ данную технику часто использовали в качестве обходного пути при добавлении нескольких фонов в IE8 (автор техники — Николас Галлахер (Nicolas Gallagher); ‰ это может быть еще одним решением для создания эффектов, подобных описанному в секрете «Внутреннее скругление». Догадаетесь почему? ‰ с помощью этой техники можно независимо применить свойства, подобные opacity , к «фону», что также впервые воплотил Николас Галлахер.
‰ Она предоставляет более гибкий способ имитации нескольких рамок на случай, если вы не можете применить техники из секрета «Несколько рамок». Например, когда вам требуется несколько пунктирных рамок или несколько рамок с пустым пространством, заполненным прозрачными пикселами, между ними.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/parallelograms-pseudo
Десерт на сегодня - видео о том, какой прозрачный лед бывает в горах Словакии. Это круто!

Прочитано 874 раз Последнее изменение Воскресенье, 19 февраля 2017 13:56
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+