CSS Clip Path

एक flat postcard पकड़ने की कल्पना करें। अगर आप standard scissors इस्तेमाल करते हैं, तो आप इसे सिर्फ straight lines के साथ rectangular boxes में काट सकते हैं। अब, custom, shaped paper punches का एक set इस्तेमाल करने की कल्पना करें। एक single press से, आप postcard को एक perfect circle, एक sleek ellipse, या एक angled polygon star shape में punch out कर सकते हैं। CSS clip-path वही paper punch है। यह आपको अपने elements—cards और images सहित—को natively custom geometric shapes में crop और clip करने देता है।

In this page:

Circular Shapes को Clip करना
Elliptical Shapes को Clip करना
Custom Polygons को Clip करना
SVG clipPaths को Reference करना
Animated Morph Transitions

Syntax

css

selector {
  clip-path: circle(radius at x y);
  clip-path: polygon(x1 y1, x2 y2, x3 y3);
}

Circular Shapes को Clip करना

circle() function किसी element को एक perfect circular shape में clip करता है। आप circle की radius specify करते हैं (जैसे 50px या एक percentage) और optionally उसका center coordinate point define करते हैं।

Note:

किसी भी square image को जल्दी एक perfect circle में crop करने के लिए clip-path: circle(50%) इस्तेमाल करें।
Accepted values:
circle(50%) — reference box के आधे size का circle
circle(<radius> at <position>) — custom center
closest-side | farthest-side — radius keywords
circle() — default radius closest-side, centered

Warning: circle() function सिर्फ तभी एक perfect circle बनाता है जब container एक square हो; अगर container एक rectangle है, तो यह awkwardly clip हो सकता है।

उदाहरण: Clipping Circular Shapes

css

<style>
img {
  clip-path: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Circle clip">

Elliptical Shapes को Clip करना

ellipse() function किसी element को एक elliptical shape में clip करता है। यह दो radius values accept करता है (horizontal radius और vertical radius), जिससे आप smooth, oval-shaped containers बना सकते हैं।

Note:

अपने pages पर sleek, curved background panels बनाने के लिए ellipse() function इस्तेमाल करें।
Accepted values:
ellipse(<rx> <ry>) — horizontal और vertical radii
ellipse(<rx> <ry> at <position>) — custom center
ellipse(50% 30%) — box के relative percentages
closest-side | farthest-side — radius keywords

Warning: अगर आपकी ellipse radius values container boundaries से ज़्यादा हैं, तो shape कट जाएगी।

उदाहरण: Clipping Elliptical Shapes

css

<style>
.box {
  width: 200px;
  height: 100px;
  background: teal;
  clip-path: ellipse(100px 50px);
}
</style>
<div class="box"></div>

Custom Polygons को Clip करना

polygon() function आपको coordinate points की एक list define करके किसी element को किसी भी custom geometric shape में clip करने देता है। Browser आपकी custom shape बनाने के लिए इन points को sequence में जोड़ता है।

Note:

अपने custom polygon coordinates को visually design और copy करने के लिए एक online clip-path generator (जैसे Bennett Feely's Clippy) इस्तेमाल करें।
Accepted values:
polygon(x y, x y, ...) — vertices की list (तीन या ज़्यादा एक area enclose करते हैं)
polygon(evenodd, ...) — fill rule (default nonzero है)
<percentage> — reference box के relative
<length> — fixed offset

Warning: सुनिश्चित करें कि आप सभी coordinate points पर percentage symbols लिखें ताकि आपकी shapes responsive बनी रहें।

उदाहरण: Clipping Custom Polygons

css

<style>
.box {
  width: 150px;
  height: 150px;
  background: crimson;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
</style>
<div class="box"></div>

SVG clipPaths को Reference करना

अगर आपकी custom shape में complex curves या vector paths हैं जिन्हें standard polygon coordinates इस्तेमाल करके define करना मुश्किल है, तो आप अपनी clip-path property के अंदर url() function इस्तेमाल करके किसी custom SVG clipPath element से link कर सकते हैं।

Note:

complex, high-performance vector crops बनाने के लिए SVG clip paths को HTML layouts के साथ combine करें।
Accepted values:
clip-path: url(#id) — एक SVG <clipPath> को reference करता है
clipPathUnits="objectBoundingBox" — 0 से 1 coordinates
clipPathUnits="userSpaceOnUse" — default, absolute coordinates
clip-path: none — reference हटाता है

Warning: referenced SVG clipPath को सही तरीके से load होने के लिए आपके HTML markup के अंदर defined होना चाहिए।

उदाहरण: Referencing SVG clipPaths

css

<svg width="0" height="0">
  <clipPath id="myClip">
    <path d="M0,0 L100,0 L50,100 Z"></path>
  </clipPath>
</svg>
<style>
.box {
  width: 100px;
  height: 100px;
  background: navy;
  clip-path: url(#myClip);
}
</style>
<div class="box"></div>

Animated Morph Transitions

आप standard CSS transition या animation properties इस्तेमाल करके समय के साथ clip paths को smoothly animate और morph कर सकते हैं, जब तक start और end clip-paths में coordinate points की संख्या बिल्कुल बराबर हो।

Note:

engaging, interactive animated card transitions बनाने के लिए hover states के अंदर morphing clip paths इस्तेमाल करें।
Accepted values:
clip-path: polygon(...) — जब point count match करे तो animatable
transition: clip-path 0.4s — change animate करता है
समान संख्या में points — smooth interpolation के लिए ज़रूरी
clip-path: none — interpolate नहीं किया जा सकता

Warning: अगर आपके start और end clip paths में coordinate points की अलग संख्या है, तो transition animate होने में fail हो जाएगा और इसके बजाय instantly snap हो जाएगा।

उदाहरण: Animated Morph Transitions

css

<style>
.shape {
  width: 150px;
  height: 150px;
  background: orange;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s;
}
.shape:hover {
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
</style>
<div class="shape"></div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Columns Next Lesson → CSS Shapes

CSS Clip Path

Circular Shapes को Clip करना

Elliptical Shapes को Clip करना

Custom Polygons को Clip करना

SVG clipPaths को Reference करना

Animated Morph Transitions

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code