असली लेआउट में CSS clip-path उदाहरण

हेक्सागन प्रीसेट चुनें, घोषणा वाला आउटपुट लें और उसका clip-path नियम अपनी वर्गाकार इमेज क्लास में कॉपी करें। चौड़ाई और ऊँचाई बराबर रखें और object-fit: cover लगाएँ; पूरा उदाहरण CSS 4:3 डेमो बॉक्स का है, इसलिए उसे अवतार पर बिना बदलाव पेस्ट न करें। चेहरे को सभी किनारों पर जाँचें; बहुभुज बदलने से विषय की जगह नहीं बदलती।

कॉल टू एक्शन के बगल की सजावटी इमेज पर शेवरॉन उदाहरण लगाएँ। एक ही प्रतिशत निर्देशांकों की तुलना चौकोर बॉक्स और चौड़े बॉक्स में करें: वे हर अक्ष के साथ स्केल होते हैं, इसलिए कोण और सिल्हूट बदल सकते हैं। डेस्कटॉप के साथ-साथ संकरा मोबाइल लेआउट भी जाँचें। ज़रूरी टेक्स्ट और असली लिंक को क्लिप किए गए सजावटी एलिमेंट के बाहर रखें।

कार्ड के पीछे सजावटी परत पर पैरेलोग्राम आज़माएँ। अगर पूरे कंटेंट कंटेनर पर लगाने से शीर्षक, फ़ोकस आउटलाइन या बटन कट जाते हैं तो ऐसा न करें। आकृति का प्रीव्यू कीबोर्ड सुलभता सिद्ध नहीं कर सकता। तैयार कॉम्पोनेंट में Tab से घूमें और सुनिश्चित करें कि फ़ोकस किया नियंत्रण दोनों चौड़ाइयों पर दिखता रहे।

षट्भुज प्रीसेट से शुरू करें और पहले बिंदु को X 30%, Y 0% पर रखें। चुने गए बिंदु के बाद बिंदु जोड़ें या हटाएँ; सीमा 3–32 बिंदु है। खींचें, 0–100% निर्देशांक भरें या तीर कुंजियाँ इस्तेमाल करें (1%; Shift के साथ 10%)। मौजूदा लेआउट बनाए रखने के लिए केवल clip-path घोषणा कॉपी करें; पूरे CSS में डेमो शैली भी है। डेस्कटॉप और मोबाइल पर चौकोर और चौड़े कंटेनर जाँचें। पाठ और फ़ोकस की रूपरेखा कटने वाली परत से बाहर रखें और आयताकार विकल्प बनाए रखें। CSS आयात तथा circle, ellipse या inset का संपादन समर्थित नहीं है।

Toolars इस गाइड और इससे जुड़े टूल का रखरखाव करता है। निर्देशों और मौजूदा आउटपुट में अंतर हो तो बताएं, ताकि दोनों की साथ में समीक्षा हो सके।

नीचे डाउनलोड किया जा सकने वाला उदाहरण कृत्रिम परीक्षण इनपुट है, किसी ग्राहक का केस अध्ययन नहीं। दोहराते समय इनपुट और सेटिंग समान रखें; केवल प्रीव्यू नहीं, डाउनलोड की गई फ़ाइल को बताए गए मानदंडों से जांचें।

जांच केवल इस उदाहरण तक सीमित है। यह हर फ़ाइल, ब्राउज़र या गंतव्य ऐप को प्रमाणित नहीं करती। टूल में बदलाव के बाद दोबारा जांचें और साझा करने से पहले अपना आउटपुट भी देखें।

Toolars सिंथेटिक सैंपल · 2026-09-13 को अपडेट किए गए। ये कार्यप्रवाह दिखाते हैं, असली फ़ोटो या स्कैन की गुणवत्ता या किसी प्लेटफ़ॉर्म की स्वीकृति नहीं।

CSS सैंपल हेक्सागॉन प्रीसेट इस्तेमाल करता है। CSS clip-path में हेक्सागॉन चुनें, क्षैतिज बिंदु 24 और ऊर्ध्वाधर बिंदु 50 पर सेट करें। डाउनलोड की गई दोनों clip-path घोषणाओं की सैंपल से तुलना करें; रंग और सफ़ेद स्थान भिन्न हो सकते हैं। चौड़े और सँकरे एलिमेंट दोनों पर जाँचें: प्रतिशत एलिमेंट बॉक्स का पालन करते हैं। केवल क्लिप करने से आसपास का टेक्स्ट अपने आप आकृति के चारों ओर नहीं लपेटता।

इनपुट सैंपल डाउनलोड करें