Introduction
The CSS clip-path property is a powerful feature that allows developers to define custom shapes and clip parts of an element, making only specific areas visible. This property is commonly used to create creative and unique designs, such as circular images, polygonal layouts, or custom transitions. By specifying a clipping path, you can control how an element appears within a container.
In this article, we will discuss what the clip-path property is, how it works, and its practical usage with examples and code snippets.
Definition & Usage
The `clip-path` property in CSS is used to define a specific region of an element that should be visible. Everything outside this region is hidden or "clipped." Think of it as using a stencil to paint only a specific part of an image or element.
For example, if you have a rectangular image but want to display it as a circle, you can use `clip-path` to achieve this effect. The property works with basic shapes like circles, ellipses, polygons, & even complex paths defined using SVG.
For example:
<!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>
.image-container {
width: 300px;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/300" alt="Example Image">
</div>
</body>
</html>
Output
In this Code:
1. HTML Structure:
- We have a `div` with the class `image-container` that holds an `img` element.
- The `img` tag uses a placeholder image for demonstration.
2. CSS Styling:
- The `.image-container` is set to a fixed size of 300x300 pixels & has `overflow: hidden` to ensure the clipped part of the image doesn’t spill outside the container.
- The `img` element is set to cover the entire container using `width: 100%` & `height: 100%`.
- The `clip-path: circle(50% at 50% 50%)` property clips the image into a circle. Here, `50%` is the radius of the circle, & `at 50% 50%` positions the circle’s center at the middle of the image.
Key Features
- It supports shapes like circles, ellipses, polygons, and more.
- You can use clip-path with images, videos, or other elements like <div>.
- It enhances design flexibility without using extra HTML elements or external image editing tools.
For example, you can use clip-path to make an image appear circular:
<!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 {
width: 200px;
height: 200px;
background: url('https://via.placeholder.com/200') no-repeat center/cover;
clip-path: circle(50%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output: The image inside the <div> will appear as a circle.
519+ registered 
