Milind Daraniya

Hello web designers and developers! In this post, we'll embark on a creative journey exploring the magical world of CSS clip-path. This powerful property allows us to mold and sculpt elements into various shapes, giving rise to captivating and unique designs. Let's dive into the possibilities with practical examples:

1. Circle

Creating a circle with clip-path is as simple as setting the border-radius property to 50%.

.circle {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-radius: 50%;
}

2. Triangle

To craft a triangle, we can use the polygon() function with three coordinate points.

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173.2px solid #e74c3c;
}

3. Pentagon

A pentagon is created similarly to a triangle, but with five coordinate points.

.pentagon {
  width: 0;
  height: 0;
  border-width: 100px 50px 173.2px;
  border-style: solid;
  border-color: #27ae60 transparent;
}

4. Hexagon

For a hexagon, we need six coordinate points.

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #f39c12;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  top: -25px;
  width: 0;
  height: 0;
}

.hexagon:before {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid #27ae60;
}

.hexagon:after {
  top: 25px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid #27ae60;
}

5. Heart

To form a heart shape, we can utilize the ellipse() function and transform it with rotate.

.heart {
  width: 100px;
  height: 120px;
  background-color: #e74c3c;
  border-radius: 50%;
  position: relative;
  transform: rotate(-45deg);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 120px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50px;
}

6. Custom Shapes

For custom shapes, use the polygon() function to specify a series of coordinate points.

.custom-shape {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid #3498db;
}

Browser Compatibility

The clip-path property is supported in modern browsers, but some older versions may require vendor prefixes.