ग्रेडिएंट्स में दांतेदार लाइनों की समस्या का समाधान

संभवतया सामान्य डिज़ाइन डिज़ाइन पैटर्न जो आप भर में आए हैं, वह ग्रेडिएंट रंगों के कोणीय संक्रमण के साथ ब्लॉक है। यह नीचे की छवि जैसा कुछ दिखता है।


आयत के अंदर कोणीय ढाल

मैं अपनी परियोजनाओं में से एक पर काम करते हुए इस पर आया था और एक छवि या एसवीजी का उपयोग करके इस तरह के प्रभाव को लागू करने के बजाय, हमने एक रैखिक ढाल का उपयोग करने का फैसला किया, जिसका फायदा यह था कि झुकाव कोण, ढाल रंग आदि को बदलना काफी आसान था। सीधे सीएसएस में।


चित्रा 2: कोणीय ढाल के दांतेदार किनारों

परिणाम चित्रा 2 में दिखाया गया है जैसा दिखता है। जैसा कि आप देख सकते हैं, ढाल रंगों के संक्रमण की सीमा पर काफी प्रमुख फैला हुआ पायदान दिखाई दिए।

सौभाग्य से, इस समस्या को हल करने का एक बहुत ही सरल तरीका है! आमतौर पर, जब आप एक रैखिक ढाल में अचानक रंग परिवर्तन की एक पंक्ति बनाना चाहते हैं, तो कोड को इस तरह लिखें:

background: linear-gradient(176deg, white, white 75%, black 75%, black 100%); 

इसका मतलब है कि ब्लॉक आकार के 0 से 75% तक की सीमा में, भराव का रंग सफेद होगा, और 75% से शुरू होगा - काला। यह एक बल्कि दांतेदार रेखा बनाता है। दुर्भाग्य से, एक निश्चित ढाल कोण और ब्लॉक आकार के साथ, बल्कि बदसूरत ज़िगज़ैग परिणाम कर सकता है।

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

 background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%); 

दांतेदार और चिकनी ढाल लाइनों की तुलना

कोड उदाहरण:


मुझे आशा है कि भविष्य में यह समस्याओं को हल करने में आपकी मदद करेगा।

"कैल्क" के साथ विचार के लिए धन्यवाद अमाखरोव
मेरी राय में, कैल्क () के साथ यह अधिक विश्वसनीय होगा: झुकाव के आकार और कोण पर निर्भर नहीं

 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))