पृष्ठभूमि के शीर्ष पर एक वक्र बनाना

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

इसे प्राप्त करने के लिए, कर्व की स्थिति और आकार को समायोजित करने के लिए मौजूदा सीएसएस कोड को संशोधित करना आवश्यक है। यहां बताया गया है कि यह कैसे किया जाता है:

1. छद्म-तत्व स्थिति समायोजित करें:

   • छद्म-तत्वों की स्थिति बदलें (.बॉक्स: पहले और .बॉक्स:बाद) से नीचे तक:100%। यह उन्हें मूल तत्व .बॉक्स के नीचे स्थानांतरित कर देगा।

2. छद्म-तत्व आयाम संशोधित करें:

   • वक्र की ऊंचाई को नियंत्रित करने के लिए छद्म तत्वों की ऊंचाई को एक विशिष्ट मान (उदाहरण के लिए, 80px) पर सेट करें।
   • छद्म तत्वों की चौड़ाई को 50% तक समायोजित करें ताकि वे .बॉक्स की आधी चौड़ाई को कवर कर सकें। .

3. ग्रेडिएंट बैकग्राउंड संशोधन:

   • .box:before और .box:after के रेडियल ग्रेडिएंट बैकग्राउंड को संशोधित करें वांछित घुमावदार आकार बनाने के लिए. तकनीक में अलग-अलग रंगों के साथ दो ग्रेडिएंट बनाना और उन्हें वांछित वक्र कोणों पर स्थित करना शामिल है। &&&]
   इसे क्षैतिज रूप से फ़्लिप करने के लिए ट्रांसफॉर्म: स्केलएक्स (-1) को .box:after पर लागू करें। यह वक्र का दर्पण प्रभाव पैदा करेगा।

4. इन चरणों का पालन करके, आप पृष्ठभूमि के शीर्ष पर सफलतापूर्वक एक वक्र बना सकते हैं और वांछित कटआउट प्रभाव प्राप्त कर सकते हैं।