Свойство 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>

Свойство clip-path

Описание

Синтаксис

Пример

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

Свойство border-bottom-width

Стиль элемента при наведении на него курсора мыши

Свойство font-grow

Обращение к самому главному родительскому элементу

Свойство border-bottom