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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

Автор: Chris Coyier

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

Комментарии (1)

  1. Ольга

    Спасибо ОГРОМНОЕ за статью! Второй день мучаюсь с этими углами, пробовала отпозицианировать border через before и after, но выходило не то. А тут все оказалось так просто и то, что нужно! На радостях решила даже комментарий написать) Спасибо!

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

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

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

Я не робот.

Spam Protection by WP-SpamFree