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	Значение элемента наследуется от родительского элемента.