🌀 CSS Clip-Path (Shape Cropping & Masking)

Last Updated: November 2025

CSS clip-path allows you to crop or clip an element (image, div, or any object) into custom shapes — circles, polygons, ellipses, or even SVG paths.

🗣 Hinglish Tip: Socho clip-path ek invisible mask hai — jo element ke kuch parts chhupa deta hai aur baaki dikhata hai.

Syntax

selector {
  clip-path: shape-function();
}

Supported Shape Functions

Function	Description	Example
circle()	Creates a circular clipping area	circle(40% at 50% 50%)
ellipse()	Creates an oval-shaped clipping area	ellipse(60% 40% at 50% 50%)
polygon()	Defines a custom shape using points	polygon(0 0, 100% 0, 50% 100%)
inset()	Creates a rectangular clip with optional rounded corners	inset(10% 20% 10% 20%)
path()	Allows SVG path commands for complex shapes	path("M10,10 L90,10 L50,90 Z")

Circle Clip

.circle {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 50%);
}

🗣 Hinglish Tip:circle(50%) = center se bilkul round crop.

Triangle using polygon()

.triangle {
  width: 200px;
  height: 200px;
  background: coral;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

🗣 Hinglish Tip:Polygon me points (x y) hote hain — 0% 0% = top-left, 100% 100% = bottom-right.

← Previous Next →