Представляем CSS-свойство clip-path

Паутина преимущественно прямоугольная. С другой стороны, печатные СМИ имеют тенденцию быть более разнообразными по форме. Среди многих причин этого различия — отсутствие соответствующих инструментов для достижения того, что мы имеем в печатных СМИ.

Этот урок познакомит вас с clip-path , свойством, которое позволяет вам предотвратить отображение части элемента. Видимый регион регулируется указанными вами значениями. Мы начнем с основ, затем рассмотрим синтаксис и позже перейдем к более сложным концепциям.

Основы

Отсечение — это когда мы обрезаем кусок чего-то В нашем случае это операция, которая позволяет нам полностью или частично скрывать элементы на веб-странице. Две другие концепции, которые относятся к отсечению, которые мы будем использовать в этой статье, это обтравочный контур и отсечения регион .

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

Все, что находится за пределами области отсечения, обрезается браузерами. Это включает не только фоны и другой подобный контент, но также границы, текстовые тени и так далее. Более того, браузеры не будут фиксировать какие-либо события, такие как hover или click за пределами области отсечения элемента.

Несмотря на то, что наш конкретный элемент теперь не прямоугольный, содержимое вокруг элементов течет точно так же, как если бы элемент имел свою первоначальную форму. Чтобы окружающие элементы текли в соответствии с формой обрезанного элемента, вам нужно будет использовать свойство shape-outside . Это было подробно описано в этом уроке SitePoint .

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

Синтаксис и использование

Правильный синтаксис для использования этого свойства:

 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none 

Синтаксические значения выше включают в себя:

• clip-source будет URL, ссылающийся на внутренний или внешний элемент SVG <clipPath> .
• basic-shape принимает базовую функцию shape, определенную в спецификации CSS Shapes .
• geometry-box является обязательным. Когда вы предоставляете его вместе с функцией basic-shape , он действует как справочное окно для отсечения, выполняемого basic-shape . Если geometry-box указан сам по себе, тогда он использует форму указанного блока, включая любое формирование угла (предоставляемое свойством border-radius ) в качестве пути отсечения. Мы рассмотрим это в ближайшее время.

Теперь рассмотрим следующий код CSS, который использует базовую функцию shape:

 img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 

Он обрезает все изображения в форме ромба. Но почему изображения обрезаются в форме ромба, а не трапеции или параллелограмма? Все зависит от значения ваших вершин. Следующая диаграмма иллюстрирует соглашения, которые будут использоваться при создании ваших собственных многоугольников для обрезки:

Первая координата каждой точки определяет ее местоположение на оси X. Точно так же вторая точка указывает свое местоположение на оси Y. Все точки нанесены по часовой стрелке. Рассмотрим крайнюю правую точку нашего ромба. Он расположен на полпути вниз по оси Y, поэтому его координата Y составляет 50%. Он также расположен в крайнем правом положении на оси x, поэтому его координата x равна 100%. Значения всех остальных точек можно вывести аналогично.

Элементы отсечения со значениями geometry-box

Когда вы обрезаете HTML-элемент, geometry-box (или блок ссылок) может быть одним из следующих: margin-box , margin-box border-box padding-box или padding-box content-box . Значение geometry-box следует использовать следующим образом:

 .clip-me { clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box; margin: 10%; } 

 .p-msg { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%); } 

 .right { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: relative; top: -352px; left: 256px; } 

 @keyframes polygons { 25% { clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%); } 50% { clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%); } 70% { clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%); } }