clip-path

The CSS property uses clipping to create the displayable area of the element. The part inside the region is displayed, and the part outside the region is hidden.

example

div {
  width: 200px;
  height: 200px;
  background: #6c00af;
  -webkit-clip-path: polygon(
    28% 6%,
    71% 15%,
    100% 75%,
    18% 39%,
    63% 27%,
    16% 22%,
    65% 19%
  );
  clip-path: polygon(
    28% 6%,
    71% 15%,
    100% 75%,
    18% 39%,
    63% 27%,
    16% 22%,
    65% 19%
  );
}
Copy the code

Draws the Cilp-path artifact

bennettfeely.com/clippy/

grammar

/* 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: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(',0,0.7 C0.5 M0.5, 1, 1, 0,0.3 A0.25, 0.25, 1,1,1,0.5, A0.25 0.3, 0.25, 1,1,1,1,0.3 C1, 0.7, 0.5, 1,0.5, 1 Z ');

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

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
Copy the code

The values

<clip-source>

Use < URL > to indicate the path of the clipped element

<basic-shape>

A shape whose size and position are defined by a < geometry box > value. If no geometry box is specified, the border is used as a reference box

<geometry-box>

If declared with < basic-Shape >, it provides a reference box for the base shape. By customization, it will include any shape corner with a defined box edge (for example, the clipping path defined by border-radius). Geometry box boxes can have one of the following values:

margin-box

Use margin boxes as reference boxes.

border-box

Use the border box as the reference box.

padding-box

Use a padding box as a reference box.

content-box

Use the Content box as the reference box.

fill-box

Use object bounding boxes as reference boxes.

stroke-box

Use stroke bounding boxes as reference boxes

view-box

Use the nearest SVG viewport as the reference box. If the viewBox property is specified to create an SVG viewport for an element, the reference box is positioned at the origin of the coordinate system created by the viewBox property. The size of the reference box is used to set the width and height of the viewBox property.

none

The clipping path that is not created.