CSS clip-path
मुफ़्त, बिना साइन-अप, आपके ब्राउज़र में चलता है।
आकृति बनाने के बजाय उससे किसी और चीज़ को काटिए। दस्तावेज़ में एक `clipPath` और एक CSS गुण मिलकर किसी छवि, वीडियो या रंगीन div को वह आकृति बना देते हैं — और इसी तरह ब्लॉब पृष्ठभूमि के बजाय अवतार मास्क बनता है।
CSS clip-path का एक निर्यात, पहली कुछ पंक्तियों तक छाँटा हुआ
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}जानने लायक़ बातें
- एलिमेंट अपनी सामग्री रखता है: यह तस्वीर के पीछे बैठने के बजाय उसे काटता है।
- इनलाइन `<svg>` ब्लॉक और CSS नियम दोनों चाहिए — गुण clipPath को उसकी id से संदर्भित करता है।
- एलिमेंट को कटाव के निर्देशांक-स्थान से मेल खाना चाहिए, इसीलिए आउटपुट आकार बता देता है।
- एक ही पेज पर एक से ज़्यादा कटाव इस्तेमाल करें तो id बदल दीजिए।
ब्राउज़र समर्थन
हर मौजूदा ब्राउज़र में समर्थित। इनलाइन clipPath को संदर्भित करने वाला `clip-path: url(#id)` सबसे व्यापक रूप है — `path()` और `shape()` फ़ंक्शन वाक्य-विन्यासों से भी ज़्यादा, जो नए हैं और जब इसमें कुछ अतिरिक्त ख़र्च नहीं तो उनका जोखिम लेने लायक़ नहीं।
सभी प्रीसेट में आकार
हर वह प्रीसेट जिसे यह प्रारूप व्यक्त कर सकता है, ठीक वैसे मापा गया जैसे जनरेटर उसे देता है। सबसे छोटा षट्भुज है, 369 बाइट पर; सबसे बड़ा छींटा है, 859 बाइट पर। फ़र्क़ बिंदुओं की संख्या से आता है — हर अतिरिक्त बिंदु निर्देशांकों का एक पूरा घन खंड जोड़ देता है।
| प्रारूप | आकार |
|---|---|
| षट्भुज | 369 B |
| क्रिस्टल | 374 B |
| पहलदार रत्न | 400 B |
| पर्वत शिखर | 423 B |
| गोल त्रिभुज | 435 B |
| झटका | 438 B |
| तीखा ज़िगज़ैग | 456 B |
| गहरी वेव | 474 B |
| बादल किनारा | 487 B |
| फ़ुटर वेव | 510 B |
| मेहराबी कटाव | 511 B |
| कंकड़ | 512 B |
| हल्की वेव | 514 B |
| परतदार वेव | 544 B |
| नरम ब्लॉब | 548 B |
| सीढ़ीनुमा | 550 B |
| झालर | 574 B |
| ऑर्गैनिक ब्लॉब | 620 B |
| चमक | 626 B |
| ऑर्गैनिक वेव | 670 B |
| तारा | 769 B |
| पिक्सेल किनारा | 771 B |
| फूल | 775 B |
| बुलबुला | 777 B |
| लहरें | 847 B |
| छींटा | 859 B |
और विस्तार से
आउटपुट `clipPathUnits="userSpaceOnUse"` इस्तेमाल करता है और आपको बता देता है कि एलिमेंट का आकार क्या रखना है, उस `objectBoundingBox` रूप के बजाय जो अपने-आप किसी भी एलिमेंट तक मापित हो जाता। यह तब तक बुरा चुनाव लगता है जब तक आप आज़मा न लें: `objectBoundingBox` हर निर्देशांक को 0 और 1 के बीच माँगता है, यानी पथ को दूसरे पैमाने पर दोबारा लिखना और उसकी अधिकांश परिशुद्धता गोलाई में गँवा देना। आकार के बारे में स्पष्ट रहना वक्र को ठीक वैसा रखता है जैसा खींचा गया था।
सवाल
CSS clip-path के रूप में कौन-सी आकृतियाँ चलती हैं?
यह प्रारूप वेव, ब्लॉब को कवर करता है। यह असली बंदिश है, इस उपकरण की कमी नहीं: जहाँ कोई जनरेटर उस सूची में नहीं है, वहाँ प्रारूप सचमुच उसे व्यक्त नहीं कर सकता, और फिर भी उसे देना आपको ऐसी चीज़ थमाना होता जो चुपचाप ग़लत आकृति बनाती।
CSS clip-path का निर्यात कितना बड़ा होता है?
इसे समर्थन देने वाले 26 प्रीसेट में 369 से 859 बाइट के बीच। कम बिंदु ही वह लीवर है जो मायने रखता है; चिकनाहट और रंग कुछ नहीं लेते।
क्या मैं बाद में इसे हाथ से बदल सकता हूँ?
हाँ। आउटपुट सादा पाठ है — न जनरेटर की टिप्पणी, न पहचान चिह्न, न यहाँ वापस आने का लिंक। रंग बदलिए, क्लास का नाम बदलिए, या पथ को अपने SVG में चिपका दीजिए: आगे कुछ भी इस पर निर्भर नहीं कि यह जैसा था वैसा ही रहे।
इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।