विकर्ण रेखाओं द्वारा अलग की गई 5 सममित छवियों के साथ एक बैनर बनाना

एक सममित छवि बैनर का अनुकरण करना

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

निम्नलिखित स्निपेट दर्शाता है कि इस सममित छवि व्यवस्था को कैसे बनाया जाए:

कंटेनर { प्रदर्शन: फ्लेक्स; ऊँचाई: 150px; मार्जिन: 0 30px; } ।डिब्बा { फ्लेक्स: 1; बॉर्डर: 1px ठोस; परिवर्तन: तिरछा (-25डिग्री); स्थिति: सापेक्ष; ओवर फलो हिडेन; } .बॉक्स: के बाद { सामग्री: ""; स्थिति: निरपेक्ष; शीर्ष: 0; निचला: 0; बाएँ: -50%; दाएँ: -50%; परिवर्तन: तिरछा (25डिग्री); पृष्ठभूमि-छवि: var(--i); पृष्ठभूमि-स्थिति: केंद्र; }