रैखिक ग्रेडिएंट पृष्ठभूमि छवि में दांतेदार किनारे बनाता है: रेखा को कैसे चिकना करें

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

समाधान ग्रेडिएंट के भीतर रंग संक्रमण को संशोधित करने में निहित है। दूसरे रंग के शुरुआती बिंदु को पहले रंग के अंतिम बिंदु से थोड़ा दूर स्थानांतरित करके, एक सूक्ष्म धुंधला प्रभाव पेश किया जा सकता है। यह तीव्र रंग परिवर्तन को कम करता है और एक चिकनी रेखा में परिणत होता है। ... पृष्ठभूमि-छवि: रैखिक-ढाल (दाएं शीर्ष पर, #ffffff 48%, पारदर्शी 50%); } ।सही त्रिकोण { ... पृष्ठभूमि: रैखिक-ढाल (ऊपर बाईं ओर, #ffffff 48%, पारदर्शी 50%); }

दिखाए गए अनुसार स्टॉप और स्टार्ट बिंदुओं को समायोजित करने से, रंग परिवर्तन कम अचानक हो जाता है, जिससे त्रिकोण के आधार पर रेखा की चिकनाई बढ़ जाती है। यह ध्यान देने योग्य है कि यह रिज़ॉल्यूशन प्रतिक्रियाशीलता से समझौता किए बिना अधिकांश आधुनिक ब्राउज़रों के साथ संगतता प्राप्त करता है।