सीएसएस स्क्यू एलिमेंट और अचीव इनर राउंडेड बॉर्डर टॉप

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

HTML संरचना को परिभाषित करना

सबसे पहले, आइए HTML संरचना को परिभाषित करें:

CSS को कार्यान्वित करना

तत्व को तिरछा करने और आंतरिक गोलाकार सीमा शीर्ष को जोड़ने के लिए, हम निम्नलिखित CSS का उपयोग करेंगे:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

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

तिरछा और आंतरिक सीमा का संयोजन

तिरछा तत्व और आंतरिक सीमा को मिलाकर, हम वांछित प्रभाव प्राप्त करते हैं:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

यह विधि हमें कई तत्वों की आवश्यकता के बिना तिरछी आकृति और आंतरिक गोलाकार सीमा शीर्ष दोनों के साथ एक उत्तरदायी तत्व बनाने की अनुमति देती है। यह दृष्टिकोण अधिक लचीलापन और कार्यान्वयन में आसानी प्रदान करता है।