Property clip-path

clip-path - створює обмежену область, що
визначає яка частина елемента має бути видима.
Та частина елемента що знаходиться всередині
області, будуть видимі.

The clip-path property creates a clipping region
where content within it is visible, and content
outside it is invisible.

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}

Use cases ishadeed.com

The Coordinate System

The origin is the top-left corner with the x-axis
pointing to the right and the y-axis pointing
down.

The clip-path values

Inset

The inset value defines an inset rectangle. We
can control the four edges, just like we deal
with margin or padding. In the following
example, the card has an inset of 20px from all
the edges (top, right, bottom, and left).

.card {
  clip-path: inset(20px);
}

.card {
  clip-path: inset(20px 20px 50px 20px);
}

The question is, can we have a rounded inset?
Yes! It’s possible thanks to the round keyword.
Appending the keyword round can
round the corners.

.card {
  clip-path: inset(20px 20px 50px round 15px);
  clip-path: inset(20px 20px 50px round 15px 0);
}

Circle

.card {
  clip-path: circle(80px at 50% 50%);
}

Ellipse

.card {
  clip-path: ellipse(100px 80px at center);
}

Polygon

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

.card {
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

Path

<svg class="svg">
  <clipPath id="triangle" clipPathUnits="objectBoundingBox">
    <path d="M0.05,0.05 h1 v1"></path>
  </clipPath>
</svg>

.card {
  clip-path: url("#triangle");
}

Use Cases

Angled effect

.section {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Syntax

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: xywh(0 5px 100% 75% round 15% 0);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

// Image values
clip-path: url(resources.svg#c1);

// Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

// Geometry values
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

// Box and geometry values combined
clip-path: padding-box circle(50px at 0 100px);