How to use clip-path property

  

In this post, you will learn about how to use the clip-path property which is very handy when you want to shape HTML elements.

Clip-path property is used to shape HTML elements as desired.

 SYNTAX-   clip-path: shape(co-ordinates);  

( you can add shapes like: circle, polygon, ellipse)                   

for-example:

<div class="clip" ></div>

  <style> .clip{

  background-color: red;

  width: 100px;

  height: 100px;

 clip-path: circle(50%);

} </style>

Output:

 

Another-example:

<div class="clip" ></div>

  <style> .clip{

  background-color: red;

  width: 200px;

  height: 100px;

 clip-path: polygon(0 0,100% 0,100% 75%,0 100%);

} </style>

Output: