Короткий рассказ о том, как мы создали полноразмерный блок со скошенными углами, используя свойство clip-path.
Блок ко скошенными краями

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

Летс ду ит!

Есть видеоурок, где объясняются различные способы реализации скосов у блока (а тут YouTube канал)

Компонент из пособия строится на фреймворке CodyHouse

Существует несколько способов создать блок со скошенными углами (как обычно в CSS). В этом случае мы решили использовать свойство clip-path.

Свойство clip-path позволяет обрезать элемент, определив область, например, в форме многоугольника, действующую как маска. Часть элемента за пределами этой области становится не видна.

В примере выше – координаты прямоугольника.

Первое значение координаты относится к оси x, второе - к оси y.
Первое значение координаты относится к оси x, второе – к оси y.

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

Обратите внимание, мы применяем свойство clip-path не к самому элементу, а к его псевдо-элементу ::before.

Обрезав сам элемент, то мы увидим фон подложки под ним. И если у нас макет с блоками разных цветов, то мы получим треугольники бэкграунда между ними:

Между блоками становится виден фон контейнера. Плохо.
Между блоками становится виден фон контейнера. Плохо.

Псевдо-элемент ::before расширяет фон основного блока и перекрывает образовавшиеся вырезы. А clip-path вырезает у псевдо-элемента диагональные ребра.

Скошенный блок и никаких треугольников. Хорошо!
Скошенный блок и никаких треугольников. Хорошо!

Вот все и готово!


Оригинал статьи

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

Рубрики: CSS

0 комментариев

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

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

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

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