CSS Clip Path Generator
24 कट आकृतियाँ, आकृति विकल्प और संपादन योग्य बहुभुज बिंदु; 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;
}इस गैलरी में मूल बहुभुज के 4 उदाहरण हैं। वर्कस्पेस में 24 आकार हैं; बहुभुज में बिंदु जोड़, हटा और खिसका सकते हैं, जबकि वृत्त, दीर्घवृत्त और inset आकार पैरामीटर से बदलते हैं। SVG पाथ आयात और अपनी वक्र रेखा का संपादन शामिल नहीं है। नियम सहेजने के लिए वर्कस्पेस में Copy CSS या Download .css इस्तेमाल करें। स्थानीय PNG/JPEG/WebP छवि का पूर्वावलोकन इसी टैब में रहता है; छवि अपलोड या सहेजी नहीं जाती। पूर्वावलोकन अनुपात केवल क्रॉप बदलता है; छवि और यह अनुपात CSS/HTML निर्यात में शामिल नहीं होते।
टास्क पथ / इनपुट से परिणाम तक
24 आकारों में से चुनें। बहुभुज में बिंदु जोड़, हटा और खिसका सकते हैं; वृत्त, दीर्घवृत्त और inset आकार पैरामीटर से बदलते हैं। clip-path घोषणा या पूरा उदाहरण CSS निर्यात करें।
क्रमांकित बिंदु खींचें या निर्देशांक दर्ज करें। फ़ोकस किए बिंदु को तीर कुंजियाँ 1% और Shift + तीर 10% खिसकाते हैं। जोड़ने पर चुने हुए बिंदु और अगले बिंदु के बीच मध्यबिंदु जुड़ता है।
पूरे उदाहरण में चुना रंग, 240px चौड़ाई और 4:3 अनुपात होता है। संपादक स्क्रीन के अनुसार बदलता है।
अधिकतम 8 MiB, 16 मेगापिक्सेल और हर भुजा 8192 पिक्सेल वाली स्थानीय PNG, JPEG या WebP छवि चुनें। सभी 24 आकारों में पूर्वावलोकन कर सकते हैं। छवि cover क्रॉपिंग से फ़्रेम भरती है; 4:3, 1:1, 16:9 और 3:4 केवल इस पूर्वावलोकन को बदलते हैं। छवि अपलोड या सहेजी नहीं जाती और CSS/HTML निर्यात में शामिल नहीं होती। पूरा उदाहरण CSS अपना 4:3 अनुपात रखता है। जाने से पहले CSS कॉपी या डाउनलोड करें।
CSS आउटपुट: केवल clip-path घोषणा / पूरा उदाहरण CSS.
प्रतिशत निर्देशांक तत्व के साथ बदलते हैं। घोषणा को मौजूदा नियम में पेस्ट करें या .clipped-shape क्लास लगाएँ। डेस्कटॉप और मोबाइल पर जाँचें। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।
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%) लौट आया। कटती किनारियाँ अपने आप ठीक नहीं होतीं।
24 आकारों में से चुनें।
आम सवाल