CSS clip-path Property

CSS clip-path Property

In this tutorial, you will learn about CSS clip-path Property: - Clips are vector paths. 

Outside of this path, the element will be transparent, inside it's opaque. 

Therefore you can define a clip-path property on elements. Every graphical element that also exists in SVG you can use here as a function to define the path. 

Examples are circle(), polygon() or ellipse(). 
Syntax -

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;

 

Now we will see the values and their descriptions -

Value	Description
none	This is used for no clipping, and this is the default.
clip-source	It defines the URL to an SVG element
basic-shape	It clips an element to a basic shape like circle, ellipse, polygon.
margin-box	It uses the margin box as referenced box
border-box	It uses the border-box as a referenced box
padding-box	It uses the padding-box as the referenced box
content-box	It uses the content-box as a reference box
fill-box	It uses the object bounding box as a reference box
stroke-box	It uses the stroke bounding box as a reference box
view-box	Uses the SVG viewport as a reference box

 

Now we will see Example -

Example -

Output-