हीरो सेक्शन डिवाइडर

सबसे आम वजह जिससे कोई यहाँ आता है: एक रंगीन हीरो और उसके नीचे की चीज़ के बीच एक वक्र, ताकि दोनों सेक्शन सीधी रेखा के बजाय किसी आकृति पर मिलें।

नुस्ख़ा

क़दम दर क़दम

• जनरेटर खोलिए और प्रीसेट पंक्ति से हल्की वेव चुनिए।
• भराव का रंग *नीचे वाले* सेक्शन के पृष्ठभूमि रंग पर सेट कीजिए, हीरो के नहीं।
• SVG कॉपी कीजिए और उसे अपने हीरो के भीतर आख़िरी एलिमेंट के रूप में चिपकाइए।
• उसे `display:block` और `width:100%` दीजिए ताकि वह नीचे कोई ख़ाली जगह छोड़े बिना पूरी चौड़ाई घेर ले।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></svg>

और विस्तार से

रंग वही क़दम है जिसमें लोग चूकते हैं। डिवाइडर दरअसल *अगले* सेक्शन का ऊपरी किनारा है जो हीरो में ऊपर चढ़ रहा है, इसलिए उसे उसी सेक्शन का रंग चाहिए — हीरो का रंग दीजिए और आपको ऐसी आकृति मिलेगी जो अपनी ही पृष्ठभूमि पर अदृश्य है। अगर आकृति के नीचे एक पिक्सेल की लकीर दिखे तो वह अपनी टेक्स्ट बेसलाइन पर टिका SVG है: `display:block` उसे हटा देता है।

सवाल

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