[CSS Syntax]clip-path

Clip-path represents the clipping path, which is the clipping of a piece of content from an object. For example, in the picture, cut some of the areas that need to be left.

Here are two concepts: clipping path clipping path, clipping area clipping region.

The clipping path is the path used to crop the element, marking the area to be cropped. can be any shape.

The cropping area is the entire area that is included when the clipping path is closed.

The browser cuts out content outside the cropping area, including: backgrounds, content, borders, shadows, and so on, and does not capture events such as hover click outside the cropping area.

Clip-path syntax

Clip-path: <clip-source>| [<basic-shape>| | <geometry-box>]|none

Clip-source can be a URL reference for an internal, external SVG clippath element

Basic-shape a shape created with some basic shape functions circle () ellipse () inset () polygon ()

Geometry-box Optional parameters, used with Basic-shape, provide a reference box for their cropping work.

Browser prefix-webkit-

Attention:

Use Clip-path to draw shapes in the same direction and clockwise if they are clockwise.

Example One

Use polygon to draw a diamond

Clip-path:polygon (50% 0%, 100% 50%, 50% 100%, 0% 50%)

The polygon specifies four vertices. The XY axis specifies the positive direction of the X axis to the right and the y-axis in the positive direction.

Example Two

Use Geometry-box to crop elements

Geometry-box altogether has 7 values, namely Margin-box, Border-box, Padding-box, Content-box, fill, stroke, view-box, etc.

Where the fill stroke view-box is used on the SVG element

Margin-box, Border-box, Padding-box, Conent-box are used on HTML elements.

For example Clip-path:polygon (50% 0, 100% 50%, 50% 100%, 0% 50%) Margin-box

CSS Clip-path Maker offers a lot of common clip-path

bennettfeely.com/clippy/

1. Triangle Triangle

Clip-path:polygon (50% 0%, 100% 100%, 0% 100%)

2. Rhombus Diamond

Clip-path:polygon (50% 0%, 100% 50%, 50% 100%, 0 50%)

[CSS Syntax]clip-path