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.
Syntax:
clip-path: polygon(pairs of X and Y coordinates)
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.
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