CSS clip-path property
The clip-path property in CSS is used to create a clipping region for an element, meaning that only the parts of the element that fall within this region are visible, while the rest is hidden. This property allows you to create complex shapes and masks, giving you greater control over how elements are displayed.
Syntax
element {
clip-path: value;
}
Values
Basic Shapes:
circle(): Creates a circular clipping path.- Syntax:
circle(radius at center) - Example:
clip-path: circle(50px at center);
- Syntax:
ellipse(): Creates an elliptical clipping path.- Syntax:
ellipse(radiusX radiusY at center) - Example:
clip-path: ellipse(50px 25px at center);
- Syntax:
inset(): Creates a rectangular clipping path with optional rounded corners.- Syntax:
inset(top right bottom left round radius) - Example:
clip-path: inset(10px 20px 30px 40px round 10px);
- Syntax:
polygon(): Creates a clipping path based on a polygon defined by a set of points.- Syntax:
polygon(x1 y1, x2 y2, x3 y3, ...) - Example:
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
- Syntax:
Basic Shapes with Keywords:
url(): Refers to an SVG<clipPath>element.- Syntax:
url(#clipPathId) - Example:
clip-path: url(#clipPathId);
- Syntax:
Path:
path(): Uses an SVG path to define the clipping region.- Syntax:
path('M...Z') - Example:
clip-path: path('M10 10 H 90 V 90 H 10 Z');
- Syntax:
Examples
Example 1: Circular Clipping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.circle-clip {
width: 200px;
height: 200px;
background-image: url('your-image-url.jpg');
background-size: cover;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="circle-clip"></div>
</body>
</html>
- This example clips the element to a circular shape, showing only the part of the image within the circle.
Example 2: Elliptical Clipping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.ellipse-clip {
width: 300px;
height: 200px;
background-image: url('your-image-url.jpg');
background-size: cover;
clip-path: ellipse(50% 40% at 50% 50%);
}
</style>
</head>
<body>
<div class="ellipse-clip"></div>
</body>
</html>
- This example clips the element to an elliptical shape, focusing the visible area within the ellipse.
Example 3: Polygonal Clipping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.polygon-clip {
width: 300px;
height: 300px;
background-image: url('your-image-url.jpg');
background-size: cover;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<div class="polygon-clip"></div>
</body>
</html>
- This example uses a polygon clipping path to show the image in a diamond shape.
Example 4: SVG Path Clipping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.path-clip {
width: 300px;
height: 300px;
background-image: url('your-image-url.jpg');
background-size: cover;
clip-path: path('M10 10 H 90 V 90 H 10 Z');
}
</style>
</head>
<body>
<div class="path-clip"></div>
</body>
</html>
- This example clips the element using an SVG path, creating a custom shape defined by the path.
Browser Support
The clip-path property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, support may be limited or require prefixes in older browser versions.
Use Cases
- Custom Shapes: Create non-rectangular shapes for images, backgrounds, or other elements.
- Masks: Use clipping paths as masks to create intricate visual effects.
- Design Enhancements: Enhance design elements with complex shapes and patterns that fit the layout.