Open In App

How to create shape using CSS clipping ?

Improve
Improve
Like Article
Like
Save
Share
Report

You can easily create shapes using the clip-path property in CSS. Actually clip-path property lets you clip an element to a basic shape. The basic shape like circle, ellipse, the polygon can be achieved using the <basic-shape> property value of clip-path which will be discussed further in this article.

Property Value:

  • <basic-shape>: It includes some shapes like circles, rectangles, ellipse, etc that clips the given image.

Syntax:

clip-path: <basic-shape> 

Note: clip-path allows to clip the visible portion of SVG elements, images, or any HTML element.

Example 1: The following example creates shapes like circles, polygons.

  • Polygon:

Syntax:

clip-path: polygon(pairs of X and Y coordinates)
  • Circle:

Syntax:

clip-path: circle(radius);

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      
    <style>
        h2{
            color:green;
        }
        /* Shape Circle */
        #circle {
            height: 200px;
            width: 200px;
            color: white;
            background-color: green;            
            clip-path: circle(50%);
        }
          
       /* Shape Polygon */
        #polygon {
            height: 200px;
            width: 200px;
            color: white;
            text-align: justify;
            background-color: red;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
        }       
      
    </style>
</head>
  
<body>
    <center>
  
    <h2>GeeksforGeeks</h2>
    <h3>Shapes using Clipping</h3>
  
        <p id="circle" height="500" width="500" >Circle</p>
  
        <p id="polygon" >Polygon</p>
  
          
    </center>
</body>
  
</html>


Output:

circle and polygon

Example 2: The following example creates Ellipse and inset shape.

  • Ellipse:

Syntax:

 clip-path: ellipse(radiusX radiusY at posX posY)

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
      
    <style>
        h1{
            color: green;
        }
  
        #ellipse {
            height: 200px;
            width: 200px;
            color: white;
            background-color: red;
            clip-path: ellipse(50% 65% at 70% 50%) 
        }
        #inset {
            height: 200px;
            width: 200px;
            color: white;
            margin-left:70px;
            background-color: green;
            clip-path: inset(20% 25% 20% 10%);
        }    
    </style>
</head>
  
<body>
    <center>
  
    <h1>GeeksforGeeks</h1>
    <h3>Shapes using Clipping</h3>
  
        <p id="ellipse">Ellipse</p>
  
        <p id="inset">Inset</p>
  
          
    </center>
</body>
  
</html>


Output:

ellipse and inset

Example 3:  The following example creates circle and heptagon shapes

Syntax for Circle:

clip-path: circle(radius, shifted center by X, shifted center by Y)

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
      
    <style>
        h2{
            color: green;
        }
        /* Shape Circle */
        #circle {
            height: 200px;
            width: 200px;
            color: white;
            background-color: green;            
            clip-path: circle(70px at 50px 35px );
        }
          
       /* Shape Heptagon */
        #polygon {
            height: 200px;
            width: 200px;
            color: white;
            text-align: justify;
            background-color: red;
            clip-path: polygon(50% 0%, 
                     90% 20%, 100% 60%, 
                     75% 100%, 25% 100%, 
                     0% 60%, 10% 20%)
        }        
      
    </style>
</head>
  
<body>
    <center>
  
    <h2>Welcome to GeeksforGeeks</h2>
    <h3>Shapes using Clipping</h3>
  
        <p id="circle" height="500" width="500" >Circle</p>
  
        <p id="polygon" >Heptagon</p>
          
    </center>
</body>
  
</html>


Output:

Example 4: The following example creates ellipse and inset shapes.

Syntax for ellipse:

clip-path: ellipse(x, y) 

Syntax for inset:

clipt-path: inset(top, right, bottom, left)

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
      
    <style>
        h2{
            color: green;
        }
          
        #ellipse
       {
            height: 200px;
            width: 200px;
            color: white;
            background-color: red;
            clip-path: ellipse(50% 30% ) /*ellipse(x, y) */
        }
          
        /* inset(top, right, bottom, left  ) */
        #inset 
        {
            height: 200px;
            width: 200px;
            color: white;
            background-color: green;
            clip-path: inset(1px 30px 10px 70px); /* inset(0 19% 4% 18%);*/
        }
      
    </style>
</head>
  
<body>
    <center>
  
    <h2>GeeksforGeeks</h2>
    <h3>Shapes using Clipping</h3>
        <p id="ellipse" >Ellipse</p>
  
        <p id="inset" >Inset</p>
          
    </center>
</body>
  
</html>


Output:

ellipse and inset



Last Updated : 22 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads