Блоки со срезанными углами в CSS

Блоки со срезанными углами в CSS

От автора: предположим, вы пытаетесь создать элемент дизайна в котором углы блока являются срезанными. Может быть, вы фанат «Звездного крейсера «Галактика»? Или, может быть, вам просто нравится этот необычный эффект, так как он отличается от стандартных прямоугольников.

Я подозреваю, что есть много способов сделать это. Конечно, вы можете использовать несколько фонов. Вы могли бы также использовать гибкую SVG-фигуру для фона элемента. Бьюсь об заклад, должен быть также какой-нибудь экзотический способ использовать градиенты, чтобы сделать это. Но есть и другие возможности создать с помощью CSS срезанные углы.

Мне нравится идея просто взять ножницы и обрезать нужные участки. По существу, именно это мы можем сделать с помощью clip-path. Мы можем использовать функцию polygon(), задать список координат X и Y и обрезать все, что находится за их пределами.

Посмотрите, что произойдет, если мы зададим три точки: среднюю верхнюю, нижнюю правую, нижнюю левую.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
.module {
  clip-path: 
 polygon(
 50% 0,
 100% 100%,
 0 100%
 );
}

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

.module {
  clip-path: 
 polygon(
 0% 5%, /* верхняя левая */
 5% 0%, /* верхняя левая */
 95% 0%, /* верхняя правая */
 100% 5%, /* верхняя правая */
 100% 95%,  /* нижняя правая */
 95% 100%,  /* нижняя правая */
 5% 100%, /* нижняя левая */
 0 95% /* нижняя левая */
 );
}

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

Мы можем использовать функцию calc(), чтобы исправить это. Когда нужно, мы будем использовать проценты, но, чтобы получить нужные нам позицию и угол, мы просто вычитаем из процентов.

.module {
  clip-path: 
 polygon(
 0% 20px, /* верхняя левая */
 20px 0%, /* верхняя левая */
 calc(100% - 20px) 0%, /* верхняя правая */
 100% 20px, /* верхняя правая */
 100% calc(100% - 20px),  /* нижняя правая */
 calc(100% - 20px) 100%,  /* нижняя правая */
 20px 100%, /* нижняя левая */
 0 calc(100% - 20px) /* нижняя левая */
 );
}

И знаете, что? Это число повторяется столько раз, что мы можем сделать его переменной. Если нам когда-либо позже понадобится изменить число, тогда мы можем просто поменять значение переменной один раз и все.

.module {
  --notchSize: 20px;
 
  clip-path: 
 polygon(
 0% var(--notchSize), 
 var(--notchSize) 0%, 
 calc(100% - var(--notchSize)) 0%, 
 100% var(--notchSize), 
 100% calc(100% - var(--notchSize)), 
 calc(100% - var(--notchSize)) 100%, 
 var(--notchSize) 100%, 
 0% calc(100% - var(--notchSize))
 );
}

Вот, что у нас получилось

Это уже вполне рабочий вариант, но убедитесь, что у вас достаточные поля, чтобы осталось место для обработки обрезки. Если вы хотите подключить творчество, вы можете использовать переменные CSS, чтобы, чем сильнее вы обрезаете углы, тем больше становились поля.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree