Свойство 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>Читайте также
Родственные селекторы
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем б...
Свойство box-decoration-break
Указывает, как оформлять фрагменты текста при его переносе на другую строку. Работает только для свойств: background, border, border-image, box-shadow...
Свойство clip-path
Создает ограниченную область, которая определяет какая часть элемента должна быть видимой.
Те части, которые находятся внутри области, видимы, ...
Свойство padding-inline
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по строчной оси....