दो सेक्शन के बीच संक्रमण

जहाँ अलग रंगों के दो सेक्शन पेज के बीच में मिलते हैं। परतें यहाँ किसी और जगह से ज़्यादा काम करती हैं, क्योंकि सजाने को एक किनारा नहीं, मिलाने को दो रंग हैं।

नुस्ख़ा

क़दम दर क़दम

• एक ही बीज से कई वक्र पाने के लिए परतदार वेव चुनिए।
• दोनों रंग ऊपर और नीचे वाले सेक्शन के रंगों पर सेट कीजिए।
• CSS बैकग्राउंड के रूप में निर्यात कीजिए और उसे दोनों सेक्शन के बीच एक छोटे ख़ाली div पर लगाइए।
• उस div को एक निश्चित ऊँचाई दीजिए — बैकग्राउंड इमेज की अपनी कोई अंतर्निहित ऊँचाई नहीं होती।

.shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…

और विस्तार से

ख़ाली div वही हिस्सा है जिसे ठीक करना ज़रूरी है। `background-image` अपने एलिमेंट का आकार तय नहीं करती, इसलिए बिना ऊँचाई वाला div ऐसा div है जिसके भीतर कोई आकृति नहीं — और यही सबसे आम वजह है कि यह नुस्ख़ा कुछ करता हुआ नहीं लगता। उसे अपने बाक़ी अंतराल जैसी ही इकाइयों में ऊँचाई दीजिए और `background-size: cover` लगाइए ताकि आकृति किसी भी चौड़ाई पर उसे भर दे।

सवाल

इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।