How to design with CSS shapes: An introduction

Feb 4, 2026

कैसे करना है

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

शुरू करने के लिए सबसे आसान आकार एक सर्कल या अंडाकार है। यदि आपके पास एक आयताकार है और आप सभी सीमा त्रिज्या को 50 प्रतिशत से अधिक तक सेट करते हैं, तो आपके पास एक अंडाकार होगा, और यदि आप एक वर्ग से शुरू करते हैं, क्योंकि सभी पक्ष एक ही लंबाई हैं, तो आपको एक सर्कल मिलेगा। यह कुछ ऐसा है जिसे आपने शायद पहले किया है, लेकिन यह एक ऐसी तकनीक है जिसे अक्सर पृष्ठों के डिजाइन में अंतर्निहित किया जाता है।

20 सर्वश्रेष्ठ वायरफ्रेम उपकरण

अगले सीएसएस नियम डीआईसी के लिए आईडी के साथ है chape_contain । यह किसी भी अतिप्रवाह छिपे हुए ब्राउज़र को भरने के लिए सेट है। अनुवाद 3 डी यह सुनिश्चित करना है कि सामग्री हार्डवेयर-त्वरित है। दो पृष्ठभूमि छवियों से पहले एक बड़ी सीमा जोड़ा जाता है। एक नियमित छवि है जबकि उपरोक्त एक एक्वा रंग, अर्द्ध पारदर्शी ढाल है।

 #shape_contain {
बॉक्स आकार का आकार: सीमा-बॉक्स;
चौड़ाई: 100%;
ऊंचाई: 100 वीएच;
बहुत ज्यादा गोपनीय;
ट्रांसफॉर्म: अनुवाद 3 डी (0, 0, 0);
सीमा: 20px ठोस आरजीबी (255, 254, 244);
पृष्ठभूमि: रैखिक-ढाल (0deg, आरजीबीए (7,
47, 46, 0.8) 0%, आरजीबीए (255, 252, 226, 0.5)
100%), यूआरएल (../ छवियों / mountain.jpg)
नो-रिपीट सेंटर सेंटर;
पृष्ठभूमि आकार: कवर;
}

05. एक सर्कल से शुरू करें

Mountain background with blue translucent circle — [9 7] मंडल बनाने के लिए सबसे आसान आकार हैं

पहला ज्यामितीय आकार जो बनाया जाएगा वह सबसे सरल आकारों में से एक है। एक सर्कल किसी भी वर्ग के आकार से बना दिया जा सकता है डिव की सीमा त्रिज्या जोड़कर 50% । सर्कल अर्ध-पारदर्शी है, जिसमें एक नरम छाया इसके किनारे में जोड़ा गया है।

 #circle {
चौड़ाई: 80 वीएच;
ऊंचाई: 80 वीएच;
सीमा-त्रिज्या: 50%;
पृष्ठभूमि: आरजीबीए (136, 23 9, 231, 0.3);
स्थिति: पूर्ण;
शीर्ष: 7 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-50%, 0, 0);
बॉक्स-छाया: 0 पीएक्स 5 पीएक्स 40 पीएक्स आरजीबीए (0, 0, 0, 0.3);
}

06. एक त्रिकोण का प्रयास करें

अगला आकार थोड़ा अधिक जटिल होगा क्योंकि यह एक त्रिकोण है। यह सीएसएस क्लिप-पथ का उपयोग करके बनाने के लिए अपेक्षाकृत सरल है जो बहुभुज आकार बनाने की अनुमति देता है। इस div को इसमें जोड़ें chape_contain div।

 & lt; div id = "tri1" & gt; & lt; / div & gt;

07. त्रिभुज लागू करें

Triangle with cropped woman's face within in, on top of the blue circle — [9 7] एक फ़िल्टर ह्यू को थोड़ा बदल देता है

यहां ही क्लिप-पथ त्रिभुज बनाने के लिए सीएसएस के लिए बनाया गया है। आकार केवल तीन अंक है। पृष्ठभूमि छवि को जोड़ा गया है, और यहां एक फ़िल्टर जोड़ा जाता है ताकि ह्यू को थोड़ा स्थानांतरित किया जा सके, जिससे छवि को थोड़ा गुलाबी रंग पर ले जाया जाता है जिसे इसके विपरीत पर जोर दिया जाता है।

 # tri1 {
क्लिप-पथ: बहुभुज (0 0, 100% 0, 50%
100%);
चौड़ाई: 100 वीएच;
ऊंचाई: 88 वीएच;
पृष्ठभूमि: यूआरएल (../ छवियां / girl3.jpg)
नो-रिपीट सेंटर सेंटर;
पृष्ठभूमि आकार: कवर;
स्थिति: पूर्ण;
शीर्ष: 10 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-50%, 0, 0);
फ़िल्टर: ह्यू-रोटेट (310 डीईजी) कंट्रास्ट (140%);
अस्पष्टता: 0.8;
}

08. अधिक जटिल जाओ

Screengrab of Clip-Path maker tool — [9 7] यह टूल आपको अधिक जटिल आकार बनाने में सक्षम बनाता है

बनाया जाने वाला अगला आकार मध्य में एक छेद के साथ एक त्रिकोण होगा। यह अपेक्षाकृत सरल लगता है, लेकिन क्लिप पॉलीगॉन को एक निरंतर रेखा होने की आवश्यकता है, इसलिए यह बनाने के लिए और अधिक जटिल है। यदि आपको एक समान आकार, उपयोग करने की आवश्यकता है बेनेट फेसी क्लिप-पथ निर्माता आकार बनाने के लिए।

 & lt; div id = "tri2" & gt; & lt; / div & gt;

09. आकृतियों को ढेर करें

यहां का आकार अधिक जटिल है क्योंकि यह पहले उल्लेख किए गए लिंक में दृष्टि से बनाया गया था। बादल छवि को आकार में रखा गया है और फिर इसे थोड़ा और पीला बनाने के लिए ह्यू समायोजित किया जाता है। प्रत्येक आकार पूरी तरह से, आसपास के div के केंद्र में स्थित है, और दूसरे के शीर्ष पर एक ढेर।

 # tri2 {
क्लिप-पथ: बहुभुज (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
चौड़ाई: 80 वीएच;
ऊंचाई: 70 वीएच;
पृष्ठभूमि: यूआरएल (../ छवियों / clouds.jpg)
नो-रिपीट सेंटर सेंटर;
पृष्ठभूमि आकार: कवर;
स्थिति: पूर्ण;
शीर्ष: 1 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-50%, 0, 0);
फ़िल्टर: ह्यू-रोटेट (90 डीईजी) कंट्रास्ट (140%);
अस्पष्टता: 0.7;}

10. ब्राउज़र का आकार बदलने का प्रयास करें

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

 & lt; div id = "tri3" & gt; & lt; / div & gt;

11. इसे स्टाइल करें

More triangles layered on top of the design — [9 7] अंतिम त्रिभुज में केंद्र में एक छेद है

अंतिम त्रिभुज केंद्र में छेद के साथ पिछले एक के समान आकार का उपयोग करता है। इस बार यह एक छवि की बजाय फ़िरोज़ा की एक साधारण छाया है। पारदर्शिता नीचे की अन्य सामग्री के लिए इस त्रिभुज के माध्यम से देखने में सक्षम होने के लिए कम है।

 # tri3 {
क्लिप-पथ: बहुभुज (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
चौड़ाई: 80 वीएच;
ऊंचाई: 70 वीएच;
पृष्ठभूमि: आरजीबीए (0, 113, 110, 0.2);
स्थिति: पूर्ण;
शीर्ष: 20 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-50%, 0, 0);
}

12. एक कोण वाली पट्टी बनाएं

[23 9]

[9 7] अर्ध-पारदर्शी ढाल का उपयोग करके कोण वाली पट्टी को मिश्रित करें

अगला आकार एक कोणीय div आकार है। यह त्रिकोण के बीच में एक और दो में रखा जाएगा chape_contain div टैग। स्क्रीन पर अर्ध-पारदर्शी ढाल का उपयोग करके इसे पृष्ठ में मिलाएं। ये अलग-अलग आकार की स्क्रीन पर भी ऊपर और नीचे होंगे।

& lt; div id = "strip1" वर्ग = "पट्टी" & gt; & lt; / div & gt;

13. कोण बनाओ

Screengrab from CSS Gradient tool — [9 7] आईडी आकार की स्थिति निर्धारित करता है

पट्टी कक्षा पृष्ठभूमि ढाल सेट करता है। यह ऑनलाइन ढाल संपादक का उपयोग कर बनाया गया है सीएसएस ढाल । आईडी तब इस विशेष कोण वाले ढाल आकार की स्थिति निर्धारित करती है। यह केंद्र में रखा गया है और फिर थोड़ा ऑफसेट किया जाता है ताकि यह विभिन्न मॉनीटर पर लगातार प्लेसमेंट बनाए रख सके।

 .strip {
स्थिति: पूर्ण;
पृष्ठभूमि: रैखिक-ढाल (0deg, आरजीबीए (164)
0, 217, 0) 0%, आरजीबीए (164, 0, 217, 0.3) 35%,
आरजीबीए (255, 67, 134, 0.3) 65%, आरजीबीए (255, 67,
134, 0) 100%);
}
# strip1 {
चौड़ाई: 20 वीएच;
ऊंचाई: 120VH;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-175%, -15%, 0)
Rotatez (30deg);
}

14. अधिक ढाल कोणों का प्रयास करें

दो और div टैग अब जोड़े गए हैं जो वर्ग को पकड़ते हैं पट्टी । आईडी उन्हें स्क्रीन पर विभिन्न पदों पर रखा जाएगा। इन्हें दोहराव वाले आकार के रूप में उपयोग किया जाता है जो दृश्य के समग्र सौंदर्यशास्त्र का निर्माण करते हैं, जबकि रंग का एक छिड़काव भी जोड़ता है।

 & lt; div id = "strip2" वर्ग = "पट्टी" & gt; & lt; / div & gt;
& lt; div id = "strip3" वर्ग = "पट्टी" & gt; & lt; / div & gt;

15. कोण की स्थिति

[2 9 6] [2 9 7] [2 9 8]

[9 7] अंतिम जोड़ डिजाइन को संतुलित करने में मदद करते हैं

दो स्ट्रिप कोण ढाल आकार स्क्रीन पर मुख्य सामग्री के प्रत्येक पक्ष के लिए तैनात हैं। एक को निचले बाएं और दूसरे के ऊपरी दाएं की ओर रखा जाता है ताकि यह स्क्रीन को संतुलित कर सके। इन तत्वों को स्क्रीन पर जगह पर रखने के लिए ब्राउज़र का आकार बदलें और फिट करने के लिए स्केल करें।

 # स्ट्रिप 2 {
चौड़ाई: 5 वीएच;
ऊंचाई: 90 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (60 वीएच, -15%, 0)
Rotatez (30deg);
}
# strip3 {
चौड़ाई: 5 वीएच;
ऊंचाई: 90 वीएच;
बाएं: 50%;
ट्रांसफॉर्म: अनुवाद 3 डी (-70VH, 25%, 0)
Rotatez (30deg);
}

16. कुछ टेक्स्ट सामग्री जोड़ें

इस पृष्ठ में बड़ी मात्रा में टेक्स्ट सामग्री नहीं है, लेकिन यहां दिए गए divs में शेष शेष पृष्ठ सामग्री स्क्रीन पर रखी जा सकती है। Divs को समापन div टैग से पहले जोड़ा जाना चाहिए chape_contain पैनल। इन पाठ तत्वों को अलग-अलग कोनों में विभाजित किया जाएगा।

 & lt; div id = "लेफ्टसाइड" & gt; आयत से परे जाओ
& lt; / div & gt;
& lt; div id = "राइटसाइड" & gt; उत्तरदायी आकार
लेआउट & lt; / div & gt;
& lt; div id = "topleft" & gt; वेब डिजाइनर
& lt; br & gt; & lt; span & gt; css toolkit & lt; / span & gt; & lt; / div & gt;
& lt; div id = "topreight" & gt; 2019 & lt; / div & gt;
& lt; div id = "शीर्षक" & gt; css आकार & lt; / div & gt;

17. पाठ को घुमाएं

बाएं तरफ div स्क्रीन के बाईं ओर पूरी तरह से स्थित है, और यह 90 डिग्री से घड़ी-घड़ी के चारों ओर घुमाया जाता है ताकि यह पक्ष में फिट हो। पाठ को स्क्रीन के किनारे के करीब फिट करने के लिए रूपांतरित मूल को थोड़ा स्थानांतरित किया जाता है।

 #leftside {
स्थिति: पूर्ण;
बाएं: 20px;
शीर्ष: 70%;
ट्रांसफॉर्म-उत्पत्ति: 10% 0%;
ट्रांसफॉर्म: घुमाएं (-90 डीईजी);
}

18. दाईं ओर पाठ की स्थिति

दाएं हाथ का पाठ बाएं पाठ के समान है, सिवाय इसके कि यह स्क्रीन के दाईं ओर से स्थित है। घूर्णन को घड़ी की दिशा में धक्का दिया जाना चाहिए ताकि पाठ बेहतर बैठ सकें और स्क्रीन के दाईं ओर आसान पढ़ सकें।

 #Rightside {
स्थिति: पूर्ण;
सही: 20px;
शीर्ष: 70%;
ट्रांसफॉर्म-उत्पत्ति: 90% 0%;
ट्रांसफॉर्म: घुमाएं (90 डीईजी);
}

19. पाठ को स्टाइल करें

अब शीर्ष-बाएं कोने के लिए पाठ शैलीबद्ध है। पहले दो शब्द उनके डिफ़ॉल्ट आकार पर छोड़े जाते हैं, जबकि शेष शब्दों को टेक्स्ट में कुछ पदानुक्रम प्रदान करने के लिए अगली पंक्ति में वृद्धि और स्थान पर रखा जाता है। यह किसी भी आकार बदलने के माध्यम से ऊपरी बाएं कोने से चिपकेगा।

 #topleft {
स्थिति: पूर्ण;
बाएं: 40px;
शीर्ष: 40 पीएक्स;
चौड़ाई: 180 पीएक्स;
पाठ-संरेखण: केंद्र;
}
#topleft अवधि {
फ़ॉन्ट आकार: 1.8em;
}

20. दाएं हाथ का पाठ सेट करें

शीर्ष-दाएं कोने के लिए पाठ अब सेट है। यह एक काले गोल सर्कल के अंदर सेट है, जिसमें सर्कल के खिलाफ सफेद रंग में सेट किया गया है। यह लाइन ऊंचाई को केंद्र में पाठ को संरेखित करने के लिए लाइन ऊंचाई विधि का उपयोग करता है, रेखा की ऊंचाई को डीआईवी ऊंचाई के समान उपयोग करके।

 #topright {
स्थिति: पूर्ण;
सही: 35 पीएक्स;
शीर्ष: 25px;
लाइन-ऊंचाई: 100 पीएक्स;
फ़ॉन्ट आकार: 1.4em;
चौड़ाई: 100 पीएक्स;
ऊंचाई: 100px;
पृष्ठभूमि: # 000;
रंग: #fff;
पाठ-संरेखण: केंद्र;
सीमा-त्रिज्या: 50%;
}

21. हेडलाइन टेक्स्ट सेट करें

Final design shown within a mobile-sized browser window — [9 7]अंतिम पाठ सेट किया जाना मुख्य शीर्षक है

सेट करने के लिए बहुत आखिरी पाठ स्क्रीन के केंद्र में मुख्य शीर्षक है। इसके लिए टाइपफेस बदल दिया गया है, और इसे हल्का गुलाबी अर्ध-पारदर्शी रंग दिया जाता है ताकि यह इस पृष्ठ के डिजाइन के हाइलाइट रंग के साथ मिश्रण हो। पृष्ठ को सहेजें और तैयार परिणाम देखने के लिए अपने ब्राउज़र को रीफ्रेश करें। पृष्ठ की एक प्रति सहेजना या साझा करना चाहते हैं? इसे पीडीएफ के रूप में निर्यात करें और इसे अंदर से बचाएं घन संग्रहण ।

 #headline {
स्थिति: पूर्ण;
चौड़ाई: 100%;
जेड-इंडेक्स: 200;
पैडिंग-टॉप: 65VH;
फ़ॉन्ट-परिवार: 'अरवो', सेरिफ़;
पाठ-संरेखण: केंद्र;
रंग: आरजीबीए (233, 173, 255, 0.8);
फ़ॉन्ट आकार: 8VW;
टेक्स्ट-छाया: 0 पीएक्स 3 पीएक्स 50 पीएक्स आरजीबीए (0, 0, 0, 0.5);
}

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित किया गया था वेब डिजाइनर । मुद्दा 284 खरीदें या [3 9 0] सदस्यता लेने के

।

अधिक पढ़ें:

सीएसएस कला के साथ शुरू करें
5 कूल सीएसएस ग्रिड जेनरेटर
सीएसएस पद्धतियों के लिए एक वेब डिजाइनर की गाइड

How to design with CSS shapes: An introduction

05. एक सर्कल से शुरू करें

06. एक त्रिकोण का प्रयास करें

07. त्रिभुज लागू करें

08. अधिक जटिल जाओ

09. आकृतियों को ढेर करें

10. ब्राउज़र का आकार बदलने का प्रयास करें

11. इसे स्टाइल करें

12. एक कोण वाली पट्टी बनाएं

13. कोण बनाओ

14. अधिक ढाल कोणों का प्रयास करें

15. कोण की स्थिति

16. कुछ टेक्स्ट सामग्री जोड़ें

17. पाठ को घुमाएं

18. दाईं ओर पाठ की स्थिति

19. पाठ को स्टाइल करें

20. दाएं हाथ का पाठ सेट करें

21. हेडलाइन टेक्स्ट सेट करें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to make a photo collage in Photoshop CC

How to model concept art in Cinema 4D

How to correct a flawed composition

How to use web fonts

जावास्क्रिप्ट के साथ सीएसएस कक्षाओं का प्रबंधन कैसे करें

फ़ोटोशॉप में स्टाइल फ्रेम बनाएं

दूल्हे एक अनजाने में प्यारे प्राणी

Create a game environment in Unreal Engine 4

श्रेणियाँ