От автора: предположим, вы пытаетесь создать элемент дизайна в котором углы блока являются срезанными. Может быть, вы фанат «Звездного крейсера «Галактика»? Или, может быть, вам просто нравится этот необычный эффект, так как он отличается от стандартных прямоугольников.
Я подозреваю, что есть много способов сделать это. Конечно, вы можете использовать несколько фонов. Вы могли бы также использовать гибкую SVG-фигуру для фона элемента. Бьюсь об заклад, должен быть также какой-нибудь экзотический способ использовать градиенты, чтобы сделать это. Но есть и другие возможности создать с помощью CSS срезанные углы.
Мне нравится идея просто взять ножницы и обрезать нужные участки. По существу, именно это мы можем сделать с помощью clip-path. Мы можем использовать функцию polygon(), задать список координат X и Y и обрезать все, что находится за их пределами.
Посмотрите, что произойдет, если мы зададим три точки: среднюю верхнюю, нижнюю правую, нижнюю левую.
.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.