रिस्पॉन्सिव क्लिपिंग के लिए shape() का इस्तेमाल करना

bookmark_border संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Noam Rosenthal

पब्लिश किया गया: 8 अप्रैल, 2025

clip-path प्रॉपर्टी की मदद से, किसी एलिमेंट का आकार बदला जा सकता है. इसके लिए, एलिमेंट को सर्कल, पॉलीगॉन या SVG पाथ में काटकर उसका आकार बदला जा सकता है. हालांकि, Chrome 135 और Safari 18.4 से पहले, आपको रिस्पॉन्सिव पॉलीगॉन और एसवीजी पाथ का इस्तेमाल करके बनाए गए ज़्यादा जटिल आकार में से किसी एक को चुनना पड़ता था. नए shape() फ़ंक्शन की मदद से, clip-path एलिमेंट को ऐसे आकार में काट सकता है जो पॉलीगॉन के अलावा कोई और हो. यह आकार भी रिस्पॉन्सिव होता है.

फ़्लैग का आकार बनाना

उदाहरण के लिए, clip-path: path() और clip-path: shape() का इस्तेमाल करके, फ़्लैग का आकार बनाने की तुलना करें.

फ़्लैग का आकार, पॉलीगॉन नहीं होता. इसकी ऊपरी और निचली सीमाएं, सीधी लाइनों या गोल कोनों के बजाय, घन बीज़ियर कर्व होती हैं.

clip-path: path() से फ़्लैग बनाएं

इस फ़्लैग जैसे आकार को SVG पाथ का इस्तेमाल करके दिखाया जा सकता है:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

इसे आसानी से समझने के लिए, बता दें कि एसवीजी पाथ, पाथ कमांड की एक सीरीज़ होती है:

1. 0, 20 पर जाएं.
2. कंट्रोल पॉइंट (25, 0 और 75, 40) का इस्तेमाल करके,कर्व को 100, 20 पर सेट करें.
3. वर्टिकल लाइन 80 पर सेट है.
4. कंट्रोल पॉइंट (75, 100 और 25, 50) का इस्तेमाल करके,कर्व को 0,80 पर सेट करें.
5. पाथ (0,20 तक की लाइन) बंद करें.

इससे फ़्लैग का आकार बनता है, लेकिन सभी यूनिट पिक्सल में होती हैं. SVG, उन पिक्सल को व्यू-बॉक्स में स्केल कर सकता है. हालांकि, ऐसा इस तरह से किया जाता है कि यह हमेशा पूरे आकार के ज्यामितीय स्केल की तरह दिखे.

उदाहरण के लिए, अगर आपको पूरे रेक्टैंगल को स्केल करना है, लेकिन कर्व की ऊंचाई और चौड़ाई 20 पिक्सल रखनी है, तो एसवीजी काम नहीं करेगा.

shape() से फ़्लैग बनाएं

shape() का इस्तेमाल करके, उसी नतीजे की तुलना करें. शेप फ़ंक्शन, SVG पाथ निर्देशों की तरह ही कई निर्देशों को स्वीकार करता है. हालांकि, ये निर्देश किसी भी सीएसएस यूनिट में, सीएसएस लंबाई और प्रतिशत स्वीकार करते हैं.

नीचे दी गई सीएसएस, फ़्लैग a shape() को प्रतिशत यूनिट में बदलती है:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

दर्शकों के हिसाब से कॉन्टेंट बनाना

सीएसएस की पूरी रेंज उपलब्ध होने पर, यह चुना जा सकता है कि हर कोऑर्डिनेट के लिए कौनसी सीएसएस का इस्तेमाल करना है.

उदाहरण के लिए, फ़्लैग के पूरे साइज़ को एलिमेंट के साइज़ के हिसाब से स्केल करने के लिए, लेकिन कर्व की ऊंचाई को एक जैसा रखने के लिए, यह तरीका अपनाएं:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

कस्टम प्रॉपर्टी और ऐनिमेशन जोड़ना

अब सीएसएस में आकार तय करने के बाद, कस्टम प्रॉपर्टी का इस्तेमाल करके भी ऊंचाई में बदलाव किया जा सकता है:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

@property डिस्क्रिप्टर का इस्तेमाल करके, सीएसएस प्रॉपर्टी को ऐनिमेट भी किया जा सकता है. साथ ही, इसे क्लैंप भी किया जा सकता है, ताकि यह ज़्यादा आगे न बढ़े:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

डेमो आज़माएं

Chrome 135 या Safari 18.4 में, इस CodePen डेमो में clip-path: shape() का इस्तेमाल करके बनाया गया, ऐनिमेशन वाला फ़्लैग शेप देखा जा सकता है.

खास जानकारी

clip-path: shape() की मदद से, अपने एलिमेंट को मनमुताबिक और रिस्पॉन्सिव आकार में काटा जा सकता है. पहले ऐसा सिर्फ़ कॉनिक ग्रेडिएंट या JavaScript से बनाए गए SVG जैसी तकनीकों का इस्तेमाल करके किया जा सकता था.

पूरे सिंटैक्स के लिए, स्पेसिफ़िकेशन देखें.

फ़िलहाल, यह सुविधा सिर्फ़ clip-path के लिए काम करती है. आने वाले समय में, हम एलिमेंट के बॉर्डर का आकार सेट करने के लिए, इस तरह के आकार का इस्तेमाल करेंगे. इससे, डायग्राम को रेक्टैंगल के अलावा और भी आकार में दिखाया जा सकेगा.