उल्टे सीमा-त्रिज्या प्रभाव बनाना

प्रश्न:

क्या एक उलटा सीमा-त्रिज्या प्रभाव बनाया जा सकता है प्रभाव वहां प्राप्त किया जा सकता है जहां कोने मुड़े हुए दिखाई देते हैं अंदर की ओर?

उत्तर:

मूल सीएसएस की सीमा-त्रिज्या संपत्ति नकारात्मक मानों की अनुमति नहीं देती है जिसके परिणामस्वरूप उलटा प्रभाव पड़ेगा। हालाँकि, यहां CSS का उपयोग करके एक वैकल्पिक तरीका दिया गया है:

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

कोड स्निपेट:

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }