CSS ‘clip-path недвижимость это ваш билет в форм-перенося однообразные, квадратные макеты, традиционно связанные с плоской гибкой конструкции. Вы начнете думать за пределами box, в буквальном смысле, и шестиугольники, звезды и восьмиугольники начнет принимать форму на веб-страницах.Как только вы получите ваши руки грязные с clip-path, нет никакого конца форм можно создавать, просто настройки несколько значений .

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

Клип-путь, В Nutshell

Отсечение, с clip-path имущества, сродни резки форму (как круг или пятиугольника) из прямоугольного куска бумаги.Имущество принадлежит “ CSS Маскировка модуля Уровень 1 ^{73 1} ” спецификация.В технических государства, “CSS маскировки предоставляет два средства для частично или полностью скрывает части визуальных элементов: маскировка и вырезку” .

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

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

Примечание: Маскировка выходит за рамки данной статьи, но CSS-Tricks ² и HTML5 Rocks ³ больше информации.

Ниже простой визуализации, как clip-path работает:

Примечание: Демо в этой статье, в том числе один выше, будет работать в Firefox и в WebKit и Blink-браузеров, в том числе Chrome, Safari и Opera .

Клип-путь не Clip

Существует Старше CSS 2.1 clip property ⁷ , что является довольно ограниченным, особенно потому, что он поддерживает только прямоугольные формы.Это был устаревшим в пользу clip-path ⁸ .

Статьи о отсечения, использующие устаревший синтаксис кода функции, который выглядит так:

.element {
  clip: rect(30px, 30px, 20px, 20px);
}

Поддержка клип Path

В августе 2014 года, “CSS Маскировка модуля” была опубликована в “Candidate Recommendation”, которая является шагом по сравнению с ранее “Последний звонок рабочий проект” стадии.Прежде чем мы рассмотрим при поддержке браузера, важно рассмотреть несколько способов, в которых clip-path могут быть применены к элементу, потому что поддержка браузера изменяется для каждого метода .

Есть два способа использовать clip-path:

1. С CSSОсновные формы от “ CSS Формы Module __27 | 9 ” обеспечивают удобный способ использовать clip-path.Различные формы имеющиеся в polygon, circle, ellipse и inset;inset для прямоугольных форм .
2. С SVGМожно, напротив, создать форму с помощью SVG и вырезать элемент в этом виде с помощью синтаксиса URL.Есть два способа сделать это:
   • С ссылкой на роликовых SVG (т.е. SVG разметки существует на самом странице)
   • Со ссылкой на внешнего SVG документа .

   В обоих случаях, clipPath элемент в SVG используется, чтобы обернуть элемент, который определяет путь отсечения, будь то круг, многоугольник, путь или другой элемент.Сравните демо ниже в Firefox и в WebKit или Blink браузера, например, Chrome, чтобы определить различия.Квадратные изображения подразумевает отсутствие поддержки браузера .

   Note: Третье изображение не появляется в Safari.Несмотря на обширные отладки, I’ м не в состоянии решить проблему.I’ д ценим запись в разделе комментариев, если вы столкнетесь с решением .

Как вы собрались из наблюдений демо выше в разных браузерах, поддержка отсечения paths ¹³ причудливый и в настоящее время зависит от средств, с помощью которых вы выбираете, чтобы обрезать элемент:

• С CSS: Chrome 24, Safari, Opera 7, 15 прошивкой 7.1, Android 4.4, Opera Mobile 24(Обратите внимание, что все поддерживаемые браузеры в настоящее время требуют -webkit. Префикс поставщика)
• С SVG: все перечисленные выше браузеры Firefox 3.5 и

clip-path недвижимость пока не поддерживается в Internet Explorer, но в настоящее время под consideration __84 | 14 как часть __ 61 “маскирования модуля.” |

Примечание: Существует нюанс с поддержкой SVG отсечения путь.Современный WebKit и Blink-браузеры поддерживают пути обрезки с SVGs, только если они объявлены в линию (то есть в документе).Ссылки на внешние SVGs поддерживаются только в Firefox, о чем свидетельствует в демо выше.Проект Хром отслеживания этого bug __94 | 15 .

Давайте рассмотрим преимущества CSS против SVG с clip-path .

Преимущества | CSS__104

• Осознанные синтаксис легко понять из-за относительной простоты основных форм .
• Оперативность легко достигается с относительных единицах, таких как процентные .

Преимущества | SVG__104

• Поддержка браузеров лучше, с добавлением Firefox .
• Вы можете обрезать ссложные формы, несколько фигур и текста .

В то время как CSS предлагает background-clip свойством, что дает нам некоторые варианты (в том числе нестандартным способом, чтобы обрезать текст), ни background-clip, ни CSS ‘clip-path матч, что SVG отсечения может достичь в современных браузерах.Знакомясь с clip-path CSS с помощью, однако, менее пугающим (особенно, если вы не знакомы с манипулирования SVGs) и подготовит вас к тонкостях отсечения пути с SVG, а также “ CSS Формы Module ¹⁶ “, где содержание присоединяется к форме элемента .

Примечание: Если вы не можете ждать, чтобы углубиться в матрице отсечения с SVG, Sara Soueidan в overview __15 | 17 является хорошей отправной точкой .

Давайте посмотрим на плюсы и cons использования clip-path постепенно повысить наши проекты .

Pros

• Браузеры, которые не поддерживают clip-path недвижимость будет игнорировать его.Если вы используете его с осторожностью, пользователи не-браузеров, поддерживающих не заподозрил
• Как форма отсечения путь-генерируется, спецификация заявляет, что события указатель не должен быть организован за пределами области отсечения (который идеально подходит).Так, событие клика ограничивается формой и ее внешний boundary ¹⁸ .Мы будем смотреть на это в демо ниже .
• Вы можете использовать проценты или любой единицы длины, например, пикселях или EMS, определить свои координаты с основными формами, используя CSS.Жидкость единицы, такие как проценты могут быть использованы для создания чувствительные формы, идеально подходит для адаптивных макетов .

Cons

• Все границы, тени и контуры за область отсечения будет clipped ¹⁹ .Вы не можете добавить границу и ожидать, что она будет в чести.Мы будем смотреть на некоторые альтернативы ниже .
• Спецификация еще не достигла “рекомендация” этап, так что всегда есть шанс, что синтаксис будет меняться в промежуточном .
• Несколько ошибок было зарегистрировано с clip-path и 3D-преобразования, переходы и непрозрачность, которые отнесены в демо ниже.Будьте в курсе из них, и избежать объединения свойства, которые воспроизводят эти ошибки .

Клип-путь с полигонами: Использование и Syntax

Демо ниже сосредоточиться на использовании различных видов многоугольников в конструкции.Синтаксис для других основных форм (т.е. вставка, круг и эллипс) довольно проста, и вы можете идти только до сих пор с ними.Полигоны, однако, открыть дверь, чтобы практически бесконечным числом форм .

Синтаксис для основного полигонаФорма это:

.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, ...); }

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

Вот как мы запишем его в реальном мире (минус в настоящее время поддерживается WebKit с префиксом версия):

.element { clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%); }

Давайте добавим поддержку для Firefox со ссылкой на инлайн SVG:

.element { clip-path: url("#clip-shape"); }

Вот как наша селектор, наконец, посмотреть, с поддержкой кросс-браузера:

.element {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
  -webkit-clip-path: url("#clip-shape"); /* required for Webkit/Blink browsers if you're using only inline SVG clipping paths, but not CSS clip-path */
  clip-path: url("#clip-shape");
}

Ниже код встроенного SVG, которые нам нужно будет вставить в любом месте в разметке .

<svg width="0" height="0">
  <defs>
	<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
	  <polygon points="0 1, 0 0, 1 0, 0.8 1" />
	</clipPath>
  </defs>
</svg>

Вот окончательный демо .

Вы можете создать отзывчивый путь SVG отсечения в следующем порядке:

• Установите ширину и высоту SVG до 0 .
• Установить ID на clipPath элемента внутри SVG, которые затем можно ссылаться с помощью CSS.Вы можете использовать встроенный или внешний SVG, имея в виду, поддержка браузера упоминалось выше .
• Повторное процент значения координат многоугольника, определенного с помощью CSS clip-path.Просто разделите их на 100 и добавить безразмерный точки многоугольникаSVG .
• Установите значение clipPathUnits атрибута objectBoundingBox, так что путь отсечения чтит границы HTML элемент, который ссылается это .

Дадли Стори more ²³ на этот процесс .

Давайте посмотрим на демо, чтобы понять как сюжет координаты для polygon .

Ниже мы есть образ, который обрезается.Цвет фона представляет размеры исходного изображения.Черные ящики с координатами просто абсолютно позиционирован дивы, чьи места соответствовать вершины многоугольника в процентах.Вы увидите, что они сохраняют свои позиции, даже если вы измените размер окна браузера, чтобы узкой шириной (например, 400 пикселей или больше) .

Реальные примеры с зажимом-Path

Примечание: Каждый демо в этой статье использует clip-path с CSS, но также имеет встроенный SVG вразметки с классом clip-svg, который просто сбрасывает ширину и высоту SVG до 0.Вы могли бы, в качестве альтернативы, удалить класс и установить ширину и высоту атрибуты непосредственно в SVG разметки .

Пример 1: Клип изображение к различным Polygon Shapes

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

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

Примечание: Изображения в демо отзывчивы.С помощью старого доброго отзывчивого изображения решения img { max-width: 100%; height: auto; } и адаптационных путей отсечения через CSS и SVG, мы делаем наши полигоны блаженно масштаб вверх и вниз .

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

Ничто не сравнится исключительным Clippy __16 | | 77__15 __19 ^{| | __21 27} | __19, инструмент с графическим интерфейсом Беннетт Фили визуализации формы.Все координаты для всех существующих форм приведены в процентах, и есть также опция на заказ полигон.Это своего игра-чейнджер.Вы можете использовать для создания Clippy Обрезанные формы и создать для себя SVGs на их основе, для лучшей поддержки браузера .

Пример 2: Анимация Basic формы с CSS Transition

Наведите курсор мыши на фиолетовый шестиугольника.Это превращается в восьмиугольник.Тем не менее, CSS переход указано не вступило в силу 35 .__ |

Причина этого объясняется в статьи Сара Soueidan на оживляющий CSS shapes ³⁴ : “. Количество точек, определяющих окончательную форму должны быть такой же, как число точек, определяющих начальную форму” Имеет смысл

!

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

Это декларация шестиугольника в виде многоугольника по умолчанию с шестью парами точек координат:

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

И это декларация шестиугольника в виде многоугольника с восемью парами координат, первые два из которых были продублированы:

clip-path: polygon(50% 0%, 50% 0%, 100% 25%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Сейчас переход будет гладким, как превратить формы, как видно в демо ниже .

Примечание: Для браузеров, которые поддерживают отсечения путь только с SVG (в настоящее время Firefox), мы должны добавить анимацию SMIL, чтобы получить плавный переход на режиме висения.Согласно спецификации SMIL, декларативная анимация может быть использована, чтобы оживить пути и полигонов очков в SVG, который в настоящее время невозможно с помощью CSS .

Имейте в виду, что некоторые люди обсуждения протестующий SMIL в Chrome и Chromium __20 | 35 и фокусировки по реализации Веб Анимации API ³⁶ , который, к сожалению,в начале стадии проекта .

В демо ниже (фоновое изображение любезно morgueFile ³⁷ ), можно увидеть, что мы анимированные точки полигона между mouseover 55 ~ и | события в течение периода от 0,2секунд.Посмотрите на <animate> тега в разметке SVG .