Каталожные номера :

Как обрезать элементы в CSS с помощью clip-path

Я никогда не изучал концепцию clip-path, и эта статья — изменение этой привычки. Я пройдусь по процессу изучения свойства CSS clip-path, чтобы создать фантастические фигуры с помощью CSS.

Чтобы дать вам дополнительную информацию: в мое время, когда мы работали над CSS, большая часть формирования была сделана путем наложения элементов и их скрытия среди других фигур над ним. Свойство clip-path существовало, но тогда не имело широкой поддержки.

То есть, конечно, изменилось, но мои привычки не изменились, так что давайте освежим мой мозг 🧠, изучив свойство CSS clip-path.

Основные сведения об отсечении с помощью постоянной ссылки clip-path

Давайте сначала рассмотрим центральную концепцию отсечения. Мы начнем с определения блока образца размером 200 на 200 пикселей с фоном:

Пока ничего особенного, но давайте посмотрим, что произойдет, когда мы добавим clip-path в микс.

Мы поместим clip-path в класс блока и начнем с вырезания круга в середине нашего блока.

Я сделал вырезанную часть менее прозрачной, чтобы вы могли видеть, фактический clip-path показывает только кружок, но это должно дать вам представление о том, что делает отсечение. Он маскируется поверх существующего элемента.

Форма вашей постоянной ссылки «clip-path»

Есть несколько форм, которые мы можем использовать в качестве clip-path. Давайте посмотрим на них и на то, как они работают.

Постоянная ссылка на круг

Круг, который мы уже видели в базовом примере, имеет следующий синтаксис:

  круг(радиус в posX posY)  

Положение по умолчанию будет в центре, поэтому мы также можем использовать круг как это:

  клип-путь: круг (50%);  

Это сделает круг, который заполнит всю коробку, так как круг составляет половину коробки.И поместите его в центр по умолчанию.

Однако мы можем сместить окружность следующим образом:

  clip-path: circle(50% at 70% 20%);  

Что, в свою очередь, дает следующее:

Я добавил прямоугольник в качестве прозрачного элемента, чтобы вы могли видеть, какая часть обрезается нашим кругом.

Постоянная ссылка на эллипс

Аналогично работает форма эллипса, радиус которой имеет два значения.

  ellipse(radiusX radiusY at posX posY)  

Чтобы использовать его для обрезания нашей коробки:

  clip-path: ellipse(50% 25% at 50% 50%);  

В результате получается форма, подобная такой:

Постоянная ссылка вставки

Другим отличным вариантом является значение вставки.Это можно использовать для вставки из границы блока.

В основном это работает следующим образом:

  вставка (верхний правый нижний левый круглый roundX roundY)  

Давайте попробуем довольно экстремальный вопрос, чтобы продемонстрировать, что происходит:

  clip-path: inset(10px 20px 30px 40px круглый 15px 50px);  

В результате получается вот такая форма:

Постоянная ссылка полигона

Последний очень универсальный. Он называется многоугольником и принимает пары координат x/y.Благодаря этому можно создавать впечатляющие формы.

Основные свойства работают следующим образом:

  polygon(x1 y1, x2 y2 и т. д.)  

Давайте создадим форму звезды и посмотрим, как это работает:

  clip-path: polygon( 
 50% 0% , 
 61% 35%, 
 98% 35%, 
 68% 57%, 
 79% 91%, 
 50% 70%, 
 21% 91%, 
 32% 57%, 
 2% 35%, 
 39% 35% 
 );  

В результате получается такая форма звезды:

Постоянная ссылка SVG Paths

Последний ресурс, который мы можем использовать, — это SVG-путь.Да, вы не ослышались.

Посмотрим, как это работает.

Во-первых, нам понадобится ресурс HTML с определением пути клипа SVG:

  
  
 < /path> 
  
   

  clip-path: url(#triangle);  

В результате получается вот такая форма:

Анимация путей клипа постоянная ссылка

Еще одна действительно классная вещь, которую мы можем сделать, это анимировать пути клипа.

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

  @keyframes move { 
 0% { 
 clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50 %); 
 } 
 50% { 
 clip-path: polygon( 
 50% 50%, 
 50% 25%, 
 50% 50%, 
 75% 50%, 
 50% 50%, 
 50% 75%, 
 50% 75%, 
 50% 50%, 
 25% 50% 
 ); 
 } 
 100% { 
 clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%); 
 } 
 }  

Вы можете попробовать эту анимацию и все остальные описанные свойства на этом Codepen.

См. «Перо» Криса Бонгерса (@rebelchris) на CodePen.

Спасибо, что прочитали эту статью. Я очень надеюсь, что вы узнали что-то новое о clip-paths в CSS.

Если вам не терпится узнать об этом больше, воспользуйтесь этими замечательными ресурсами.

Спасибо за прочтение, подключаемся! постоянная ссылка

Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и присоединиться к Facebook или Twitter

Bulma: бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Поскольку загрузка изображений может занять несколько секунд (или вообще не загружаться), используйте контейнер image , чтобы указать контейнер точного размера, чтобы ваш макет не нарушался из-за загрузки изображения или ошибок изображения.

Пример

HTML

  <рисунок>
  
  

Фиксированные квадратные изображения #

Есть 7 размеров на выбор, полезно для аватаров :

Округлые изображения #

Вы также можете делать округленные изображения, используя is-rounded class:

Пример

HTML

  <рисунок>
   ио/изображения/заполнители/128x128.png">
  

Изображения сетчатки #

Поскольку размер изображения фиксирован, вы можете использовать изображение, которое в раз больше в четыре раза. Так, например, в контейнере 128x128 можно использовать изображение 256x256 , но с размером 128×128 пикселей.

Пример

HTML

  <рисунок>
  
  

Адаптивные изображения с пропорциями #

Если вы не знаете точных размеров, но знаете соотношение вместо этого, вы можете использовать один из 16 модификаторов соотношения , которые включают стандартные соотношения сторон в фотосъемке:

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

Контейнер image обычно занимает всю ширину , сохраняя при этом идеальное соотношение.
Если это не так, вы можете принудительно добавить модификатор is-fullwidth .

Произвольные отношения с любым элементом #

Вы можете применить определенное соотношение к любому элементу , отличному от img , просто применив модификатор has-ratio к элементу с изменяемым размером.

Например, вы можете применить соотношение 16 на 9 к iframe . Измените размер браузера, и вы увидите, как сохраняется соотношение.

Пример

HTML

  <рисунок>