Свойство clip-path
Описание
Создает ограниченную область, которая определяет какая часть элемента должна быть видимой.
Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты.
Обрезанная область — это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG, либо как фигура.
Синтаксис
clip-path: clip-source | basic-shape || geometry-box | none;Подробности
| Значение | Описание |
| none | Обрезанная область не создается. Используется по умолчанию. |
| url() | Представляет URL ссылку на траекторию, ограничивающую элемент. |
| inset(), circle(), ellipse(), polygon() | Функция basic-shape. Размер и положение области определяется значением geometry-box. Если геометрия не определена, border-box будет использоваться в качестве блока. |
| geometry-box | Если определен в комбинации с basic-shape, то это значение определяет блок для базовой области. Если же задан самостоятельно, определяет границы блока, включая формирование углов (такое как border-radius). |
| fill-box | Использует границы объекта в качестве базовой области. |
| stroke-box | Использует stroke bounding box в качестве базовой области. |
| view-box | Использует ближайший SVG viewport в качестве базового блока. Если отриут viewBox определен для элемента, создающего SVG viewport, то базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox. |
| margin-box | Использует margin box в качестве базового блока. |
| border-box | Использует border box в качестве базового блока. |
| padding-box | Использует padding box в качестве базового блока. |
| content-box | Использует content box в качестве базового блока. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
width: 300px;
}
</style>
<img id='clipped' src='https://mfs.gki-webik.ru/s?path=/images/regular/body-img.jpg' alt='' />
<svg height='0' width='0'>
<defs>
<clipPath id='cross'>
<rect y='110' x='137' width='90' height='90' />
<rect x='0' y='110' width='90' height='90' />
<rect x='137' y='0' width='90' height='90' />
<rect x='0' y='0' width='90' height='90' />
</clipPath>
</defs>
</svg>
</body>
</html>Читайте также
Свойство list-style-image
Указывает адрес изображения, которое служит в качестве маркера списка....
Свойство transition-timing-function
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.
transition-timing-funct...
Стиль для переключателей в неопределённом состоянии
Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не п...
Функция repeating-radial-gradient()
По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис...