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

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

Летс ду ит!

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Рубрики: CSS

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

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

Похожие записи

CSS

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Что вы узнаете: Как построить CSS-сетку, поддерживаемую браузерами. Как подключить Grid Layout. Разберетесь в основах строк и столбцов сетки. Познакомитесь с новой дробной единицей (fr). Поработаете со вложенными сетками. ДА! Пора начинать! Если вы, вдруг, Подробнее…

CSS

Полное руководство по Flexbox – учимся на примерах

Какой самый лучший способ понять Flexbox? Изучить основы и написать кучу разных штук. Именно этим мы и займемся. Но сначала стоит кое-что уточнить: Эта статья написана для разработчиков среднего уровня и предполагает, что вы уже Подробнее…

CSS

Распространенные CSS ошибки (и как их избежать)

Это список популярных ошибок в проектировании, масштабировании, производительности или обслуживании, которые я постоянно нахожу при рефакторинге клиентского CSS кода. Что разработчики могут делать не так? Использовать единицы при указании межстрочного интервала Это приводит к тому, Подробнее…

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

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