Свойство CSS clip-path

Свойство clip-path позволяет задать область отсечения, которая определяет, какая часть элемента должна отображаться. Части, находящиеся за пределами этой области, скрываются. Данное свойство принимает четыре типа значений:

<clip-source>
<basic-shape>
<geometry-box>
none

Устаревшее clip свойство будет заменено свойством clip-path.

Начальное значение	none
Применяется к	Всем элементам.
Наследуется	Нет
Анимация	Да, если указано для `<basic-shape>`.
Версия	CSS Masking Module Level 1
DOM-синтаксис	object.style.clipPath = "none";

Синтаксис

Синтаксис свойства CSS clip-path

css

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

Пример использования свойства clip-path:

Пример использования свойства CSS clip-path со значением basic-shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS clip-path Property

Пример использования свойства clip-path со всеми значениями:

Пример использования свойства CSS clip-path со глобальными и значениями basic-shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
`<clip-source>`	`<url>`, ссылающийся на элемент SVG `<clipPath>`.
`<basic-shape>`	Базовая функция формы, такая как `circle()`, `ellipse()`, `inset()` или `polygon()`. Может комбинироваться с `<geometry-box>` с помощью слэша (`/`).
`<geometry-box>`	Определяет опорную область для базовой формы (например, `border-box`, `padding-box`, `content-box`, `margin-box`).
none	Путь отсечения не создаётся.

Примечание: initial, inherit и unset являются глобальными значениями CSS и могут использоваться с любым свойством.

Практика

Что делает свойство CSS clip-path?

Определяет область отсечения, которую можно применить к любому HTML или SVG элементу для управления его видимой частью.Добавляет фоновый цвет элементу.Регулирует размер текста внутри элемента.Управляет формой области отсечения, определяющей, какая часть элемента должна отображаться.Регулирует отступы вокруг элемента.

Свойство CSS clip-path ​

Синтаксис ​

Пример использования свойства clip-path: ​

Результат ​

Пример использования свойства clip-path со всеми значениями: ​

Значения ​