Свойство 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='/files/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>

Читайте также

Свойство padding-left

Устанавливает расстояние от внутреннего левого края рамки элемента до воображаемого прямоугольника.

Применяется к дочернему элементу указанного типа

Применяет стилевые правила к элементу input, у которого не задан атрибут required, он позволяет в...

Свойство content

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

Свойство justify-self

Устанавливает способ выравнивания элемента внутри его контейнера вдоль inline оси.

Свойство font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расшир...