Как создать сайт

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

Проблема

Трапеции — это еще более генерализованные фигуры, чем параллелограммы: у них только две параллельные стороны. Две оставшиеся могут быть наклонены под любым углом. Эти фигуры традиционно славятся сложностью создания с помощью чистого CSS, но при этом очень часто используются в веб-дизайне, особенно для оформления вкладок. Если разработчики не имитируют их посредством скрупулезно подготовленных фоновых изображений, то воссоздают с помощью прямоугольника с двумя треугольниками, сделанными из рамок, по бокам.

Хотя эта техника экономит HTTP-запросы, которые могли бы понадобиться вследствие использования дополнительных изображений, и легко адаптируется к изменению размеров элементов, она все же далека от совершенства. Нам приходится создавать практически бесполезные псевдоэлементы, а кроме того, мы невероятно ограничены в вариантах стилизации. Например, попробуйте добавить рамку, фоновый узор или скругленные углы к такой вкладке.

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

 

Пример вкладок в форме трапеций
В Cloud9  все открытые документы отображаются на вкладках в форме трапеций

 

В одном из предыдущих дизайнов веб-сайта https://css-tricks.com/ также фигурировали вкладки в форме трапеций, хотя они были скошены только с одной стороны
Так как все хорошо известные техники создания трапеций довольно запутанны и порождают хаотичный, сложный в поддержке код, большинство вкладок, которые мы встречаем в Сети, не имеют скошенных сторон, хотя реальные вкладки в приложениях чаще всего выглядят как раз как трапеции. Существует ли разумный и гибкий способ определять трапециевидные вкладки?

Решение

Если бы существовала комбинация двумерных трансформаций, позволяющая создавать трапециевидные фигуры, то мы могли бы просто применить вариацию решения из секрета «Параллелограммы» и покончить с этим. К сожалению, такой комбинации не существует.
Однако вообразите вращение прямоугольника в физическом, трехмерном мире.

Чаще всего получившаяся фигура, благодаря перспективе, в двумерной проекции выглядит именно как трапеция. И этот эффект можно имитировать в CSS с помощью трехмерного вращения:
transform: perspective(.5em) rotateX(5deg);
На рисeyrt видно, что в результате получается трапеция. Разумеется, так как мы применили трехмерную трансформацию ко всему элементу, искажение распространилось и на текст тоже. Трехмерные трансформации невозможно «отменять» внутри элемента так, как мы делали это с двумерными трансформациями (то есть посредством противоположной трансформации).

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

 

Отменить трехмерную трансформацию на внутреннем элементе технически возможно, но чрезвычайно сложно. Следовательно, единственный практический способ воспользоваться преимуществом трехмерных трансформаций для создания трапеции — применить трансформацию к псевдоэлементу, по аналогии с подходом, который мы применили для параллелограммов
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: »; /* Чтобы сгенерировать поле */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}
Как видно, это позволяет создать простейшую трапециевидную фигуру. Но остается нерешенной еще одна проблема. Когда мы применяем трансформацию, не устанавливая значение transform-origin , элемент поворачивается в пространстве вокруг своего центра.

 

Следовательно, его габариты на двумерной проекции, которую мы видим на экране, меняются сразу в нескольких аспектах,: он становится шире и немного смещается вверх, его высота чуть-чуть сокращается и т. п. Все это создает сложности в проработке дизайна.
Для того чтобы получить больший контроль над размерами элемента, можно определить свойство transform-origin: bottom; — оно фиксирует основание элемента при повороте его в пространстве. Отличие от предыдущего варианта вращения вы видите на рисунке ниже.

 

Теперь ситуация стала намного более предсказуемой: уменьшается только высота элемента. Однако это уменьшение намного более ярко выражено, так как весь элемент поворачивается в сторону от наблюдателя, тогда как в предыдущем варианте одна половина поворачивалась «за» экраном, а вторая — перед ним, и в трехмерном пространстве элемент в целом оказывался ближе к наблюдателю. Для того чтобы справиться с искажением, можно было бы увеличить забивку сверху. Однако в браузерах, не поддерживающих трехмерную трансформацию, результат будет выглядеть ужасающе.

Читайте также  Как сделать ромб на css


Вместо этого давайте увеличим размер элемента посредством еще одной трансформации, для того чтобы в случаях, когда трехмерные трансформации не поддерживаются, отменялись вообще все изменения формы объекта. Немного поэкспериментировав, можно убедиться, что небольшого масштабирования по вертикали (то есть трансформации  scaleY() ) — около 130% — достаточно, чтобы компенсировать потерянное пространство. Конечный результат и резервное решение показаны ниже.

 

Сейчас результат визуально эквивалентен тому, который дает нам описанная выше старая добрая техника, основанная на рамках, — однако новый синтаксис намного более емкий. Превосходство данной техники становится очевидным, когда вы начинаете применять стилизацию ко вкладкам. Например, взгляните на следующий код, в котором мы определяем стили для вкладок:
nav > a {
position: relative;
display: inline-block;
padding: .3em 1em 0;
}
nav > a::before {
content: »;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}


Как вы видите, мы определили фоны, рамки, скругленные углы и тени для полей — и все это сразу заработало безо всяких плясок с бубнами! Кроме того, всего лишь изменив значение  transform-origin на  bottom left или  bottom right, мы можем получить вкладки, скошенные соответственно влево или вправо!

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/trapezoid-tabs

Читайте также  Как сделать гибкие эллипсы

 

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

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

7 + 3 =

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

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