How to create shape using CSS clipping ?
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
Please Login to comment...