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

Noam Rosenthal

पब्लिश होने की तारीख: 8 अप्रैल, 2025

clip-path प्रॉपर्टी की मदद से, किसी एलिमेंट के आकार को बदला जा सकता है. इसके लिए, उसे किसी सर्कल, पॉलीगॉन या एसवीजी पाथ में क्लिप किया जाता है. हालांकि, Chrome 135 और Safari 18.4 से पहले, आपको रिस्पॉन्सिव पॉलीगॉन और ज़्यादा जटिल आकृतियों में से किसी एक को चुनना होता था. ये आकृतियां, SVG पाथ का इस्तेमाल करके रिस्पॉन्सिव नहीं होती हैं. नए 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 पिक्सल पर बनाए रखना है, तो SVG का इस्तेमाल नहीं किया जा सकता.

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

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

नीचे दी गई सीएसएस, फ़्लैग 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 में, clip-path: shape() का इस्तेमाल करके बनाई गई ऐनिमेशन वाली फ़्लैग शेप देखी जा सकती है. इसके लिए, इस CodePen डेमो पर जाएं.

खास जानकारी

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

पूरे सिंटैक्स के लिए, खास जानकारी देखें.

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