функция CSS polygon()

определение и использование

CSS polygon() функция используется для определения многоугольника.

polygon() функции с clip-path свойства и shape-outside свойства используются вместе.

пример

пример 1

Обрезать изображение многоугольником:

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

Попробуйте сами

пример 2

Обрезать изображение многоугольником:

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

Попробуйте сами

пример 3

использование polygon()、clip-path и shape-outside:

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

Попробуйте сами

CSS синтаксис

polygon(fill-rule, length-percentage)
Значение Описание
fill-rule

Опционален. Определяет правило заливки. Может быть nonzero или evenodd.

По умолчанию nonzero.
length-percentage

Обязателен. Определяет точки, определяющие многоугольник. Это может быть длина или процентное значение.

Каждая точка представляет собой пару координат x и y. 0 0 определяет верхний левый угол, 100% 100% определяет нижний правый угол.

Технические детали

Версия: CSS Shape Module Level 1

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

связанные страницы

См. также:атрибут clip-path

См. также:атрибут shape-outside

См. также:Функция circle()

См. также:Функция ellipse()

См. также:Функция inset()