डिज़ाइन · लोकल उपयोगिता
CSS Clip Path Generator
खींचकर, कीबोर्ड या निर्देशांक से बिंदु संपादित करें। चार प्रीसेट से शुरू करके clip-path घोषणा या पूरा CSS स्थानीय रूप से कॉपी करें।
टास्क पथ / इनपुट से परिणाम तक
शुरुआती आकृति चुनें
लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता
चार पॉलीगॉन आकृतियों की तुलना करें, फिर वर्कस्पेस में सेटिंग मिलाएँ। हर प्रीव्यू अपने CSS में वही पॉलीगॉन इस्तेमाल करता है; एक्सपोर्ट किया गया शुरुआती बॉक्स 240 × 180 px है।
वर्कस्पेस में ये सेटिंग समायोजित करेंटीम अवतार या दोहराए जाने वाले बैज के लिए हेक्सागन इस्तेमाल करें।
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}छोटी इमेज या सजावटी एक्सेंट के लिए तिरछा डायमंड आज़माएँ।
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}कार्ड एक्सेंट के लिए तिरछी चार-कोने वाली आकृति इस्तेमाल करें।
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}बैनर के किनारे को अगले सेक्शन की ओर इशारा कराएँ।
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}ऊपर किसी भी आकृति के CSS से शुरुआत करें, फिर उसके बाद ये नियम जोड़ें। इमेज पथ और alt टेक्स्ट अपने अनुसार बदलें। बॉक्स 4:3 अनुपात रखता है; object-fit: cover इमेज को बिना खिंचाव के भरने के लिए क्रॉप करता है। प्रतिशत निर्देशांक बॉक्स के आकार बदलने पर उसके साथ चलते हैं।
<img class="clipped-shape"
src="/your-image.jpg"
alt="अपनी इमेज का वर्णन करें"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}चार टेम्पलेट और दो स्लाइडर उपलब्ध हैं। फ़्री वर्टेक्स एडिटिंग, SVG पाथ इम्पोर्ट और कर्व समर्थित नहीं हैं। कस्टमाइज़ किया नियम कॉपी या डाउनलोड करने के लिए वर्कस्पेस में Copy CSS या Download .css इस्तेमाल करें।
टास्क पथ / इनपुट से परिणाम तक
षट्भुज, समचतुर्भुज, समांतर चतुर्भुज या शेवरॉन चुनें। दो स्लाइडर प्रीसेट बदलते हैं; एक बिंदु संपादित करने पर कस्टम बहुभुज बनता है।
क्रमांकित बिंदु खींचें या निर्देशांक दर्ज करें। फ़ोकस किए बिंदु को तीर कुंजियाँ 1% और Shift + तीर 10% खिसकाते हैं। जोड़ने पर चुने हुए बिंदु और अगले बिंदु के बीच मध्यबिंदु जुड़ता है।
पूरे उदाहरण में चुना रंग, 240px चौड़ाई और 4:3 अनुपात होता है। संपादक स्क्रीन के अनुसार बदलता है।
निर्यात से पहले सभी किनारे देखें। क्रमांकित हैंडल केवल संपादन के लिए हैं, CSS का हिस्सा नहीं।
CSS आउटपुट: केवल clip-path घोषणा / पूरा उदाहरण CSS. पूरे उदाहरण में चुना रंग, 240px चौड़ाई और 4:3 अनुपात होता है। संपादक स्क्रीन के अनुसार बदलता है।
प्रतिशत निर्देशांक तत्व के साथ बदलते हैं। घोषणा को मौजूदा नियम में पेस्ट करें या .clipped-shape क्लास लगाएँ। डेस्कटॉप और मोबाइल पर जाँचें।
CSS क्लिप पाथ जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।
मौजूदा ब्राउज़र टैब के अंदर चलता है।
सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।
बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।
टैब साफ़ करें और सक्रिय कार्य डेटा गायब।
2026-09-24 के स्थानीय ब्राउज़र परीक्षण में डिफ़ॉल्ट हेक्सागन (क्षैतिज 24%, लंबवत 50%) से शुरू करें। बिंदु 1 चुनें, X को 24% से 30% करें और रंग #ff6600 रखें। प्रीव्यू में छह बिंदुओं वाला नारंगी बहुभुज clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) के साथ दिखा; बाकी पाँच बिंदुओं का क्रम वही रहा।
पूरे उदाहरण CSS में .clipped-shape, चौड़ाई 240px, अनुपात 4 / 3, पृष्ठभूमि #ff6600 तथा -webkit-clip-path और clip-path दोनों हैं। कॉपी किया CSS, डाउनलोड किए toolars-clip-path.css (240 बाइट) से मिला। केवल घोषणा मोड में कॉपी का ठीक परिणाम clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 UTF-8 बाइट) था। अपने लेआउट में कटाव जाँचें।
बिंदु 1 का X = 101% करें। 2026-09-24 में कार्यक्षेत्र ने बताया कि बिंदुओं के निर्देशांक सीमित संख्या और 0–100% के बीच होने चाहिए; प्रीव्यू और CSS खाली हुए, कॉपी व डाउनलोड बंद हुए। X = 30% करने से polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) लौट आया। कटती किनारियाँ अपने आप ठीक नहीं होतीं।
चार प्रीसेट से शुरू करें, बहुभुज के बिंदु जोड़ें, हटाएँ या खिसकाएँ। clip-path घोषणा या पूरा उदाहरण CSS निर्यात करें। प्रतिशत निर्देशांक तत्व के साथ बदलते हैं। घोषणा को मौजूदा नियम में पेस्ट करें या .clipped-shape क्लास लगाएँ। डेस्कटॉप और मोबाइल पर जाँचें।
आम सवाल