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

Свойство clip-path дает возможность установить область отсечения, которая определяет, какая часть элемента должна отображаться. Те области, которые находятся вне области отсечения, скрываются. Свойство имеет четыре значения - clip-source, basic-shape, geometry-box and none.

Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да, если установлено для <basic-shape>.
Версия CSS1
DOM синтаксис object.style.clipPath = "none";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа </title>
  </head>
  <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("/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>
  <body>
    <h2>Пример свойства clip-path</h2>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <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(/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 */
    }
    .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>
  <body>
    <h2>Пример свойства clip-path</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>

Значения

Значение Описание
<clip-source> <url>, содержащая ссылку на SVG <clipPath> элемент.
<basic-shape> Форма, размер и позиция которого устанавливаются при помощи <geometry-box>.
<geometry-box> Устанавливает блок для базовой области.
none Нет области отсечения.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
55.0
(Partial)
54.0+ 7.0
-webkit- (Partial)
420 (Partial)

Практикуйте свои знания

Какие формы может иметь CSS свойство clip-path?
Считаете ли это полезным?