Use CSS's clip-path property to display irregular graphics

clip-path

CSS properties use clipping to create the displayable area of ​​an element. The part inside the area is displayed, and the part outside the area 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%
  );
}

Drawing 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('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');

/* 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;

Value

<clip-source>

Use <url> to indicate the path of the clip element

<basic-shape>

A shape whose size and position are defined by the <geometrybox> values. If no geometry box is specified, the bounding box will be used as the reference box.

<geometry-box>

If declared together with <basic-shape> , it will provide the corresponding reference box for the basic shape. By customizing it, it will use the specified box edges including any shape corners (for example, the clipping path defined by border-radius ). The geometry box can have one of the following values:

margin-box

Use margin box as the reference box.

border-box

Use border box as the reference box.

padding-box

Use padding box as the reference box.

content-box

Use content box as the reference box.

fill-box

Use the object bounding box as a reference box.

stroke-box

Use the stroke bounding box as the reference box

view-box

Use the nearest SVG viewport as the reference box. If a viewBox attribute is specified to create an SVG viewport for the element, the reference box will be positioned at the origin of the coordinate system established by viewBox attribute. The reference box is located at the origin of the coordinate system established by the viewBox attribute, and the dimensions of the reference box are used to set the width and height values ​​of viewBox attribute.

none

No clipping path is created.

This is the end of this article about using CSS's clip-path property to display irregular graphics. For more information about CSS's clip-path irregular graphics, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!