मैं बाहरी गोलाकार कोनों को एक div में कैसे जोड़ सकता हूं?

Question

मैं चयनित साइडबार आइटम में "बाहरी" गोलाकार कोनों को जोड़ना चाहता हूं ताकि यह प्रभाव दिया जा सके कि यह आइटम अच्छी तरह से सामग्री में "डालना" है।

नीचे मेरी उदाहरण में, मैं .top चाहते हैं, एक ग्रे पृष्ठभूमि के साथ एक गोल नीचे दाईं ओर के लिए .bottom के लिए एक समान ऊपरी-दाएं कोने के साथ। तुम क्या सोचते हो?

मैं ट्विटर बूटस्ट्रैप और कम से कम उपयोग कर रहा हूं, अगर इससे यह आसान हो जाता है।

jsFiddle: http://jsfiddle.net/3YXb2/

बारी इस:

इस में

:

मार्कअप:

<div class="wrapper"> 
    <div class="sidebar"> 
     <div class="top"> 
      <p>Top</p> 
     </div> 
     <div class="middle"> 
      <p>Middle</p> 
     </div> 
     <div class="bottom"> 
      <p>Bottom</p> 
     </div> 
    </div> 
    <div class="container"> 
     <p>Content</p> 
    </div> 
</div> 

सीएसएस:

body { 
    margin:10px; 
} 
div { 
    margin:0; 
    margin-right:-4px; 
    padding:0; 
    display:inline-block; 
    vertical-align:middle; 
} 
.wrapper { 
    width:100%; 
    display:block; 
    border:1px solid; 
} 
.container { 
    background-color:gray; 
    width:70%; 
    height:300px; 
} 
.sidebar { 
    background-color:white; 
    width:30%; 
    height:300px; 
} 
.middle { 
    background-color:gray; 
} 
.top,.middle,.bottom { 
    width:100%; 
    height:100px; 
    display:block; 
} 
p { 
    padding:40px 0 0; 
    margin:0; 
    text-align:center; 
} 

Answer 1

सीएसएस 3 border-radius संपत्ति प्रदान करता है। हालांकि, कृपया ध्यान दें कि यह IE8 या किसी भी संस्करण के लिए उपलब्ध नहीं है। हैक्स उपलब्ध हैं; लेकिन वे सिर्फ यही हैं: हैक्स।

प्रयोग इस तरह दिखता है:

.sidebar { 
     background-color:gray; 
     width:30%; 
     height:300px; 
    } 
    .middle { 
     background-color:gray; 
    } 
    .top,.middle,.bottom { 
     width:100%; 
     height:100px; 
     display:block; 
    } 
    .top{ 
     background: white; 
     border-bottom-right-radius:10px; 
    } 
    .bottom{   
     background: white; 
     border-top-right-radius: 10px; 
    } 

jsFiddle example

Answer 2

आप सीएसएस के बॉर्डर-त्रिज्या का उपयोग कर सकते हैं। आप यहां एक ऑनलाइन राउंड सीमा जनरेटर देख सकते हैं: http://border-radius.com/

Answer 3

आप बॉर्डर-त्रिज्या का उपयोग करना चाहते हैं और यह वेरिएंट है।

ईजी

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 

यह यहाँ के लिए अच्छा उपकरण: http://www.cssportal.com/css3-rounded-corner/

Answer 4

उपयोग CSS3 के बॉर्डर-त्रिज्या।

.top 
    { 
     border-bottom-right-radius: 3px; 
     -moz-border-radius-bottomright: 3px; 
     -webkit-border-bottom-right-radius: 3px; 
    } 

.bottom 
    { 
     border-top-right-radius: 3px; 
     -moz-border-radius-topright: 3px 
     -webkit-border-top-right-radius: 3px; 
    } 

Answer 5

यदि मैं आपको सही ढंग से समझता हूं तो आप एक उल्टा सीमा त्रिज्या की तलाश में हैं। क्या यह आपके मन में है?

http://jsfiddle.net/3pW2M/

यह अगर सफेद क्षेत्र उदाहरण के लिए एक पृष्ठभूमि छवि दिखाने के लिए पारदर्शी होने की जरूरत है काम नहीं करेगा।

.top { 
    position: relative; 
} 

.topcorner { 
    position: absolute; 
    margin: 0; 
    bottom: 0; 
    right: 0; 
    height: 50px; 
    width: 50px; 
    background: gray; 
} 

.topcorner:after { 
    content: ''; 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    background: white; 
    border-radius: 0 0 50px 0; 
} 

Answer 6

मुझे लगता है कि यह किसी प्रकार की उपयोगकर्ता बातचीत, नेविगेशन, टैब, एक्सटी के लिए आवश्यक होगा।इसलिए मैं यह jsFiddle

$(document).ready(function() { 
    $('.top').hover(function() { 
    $('.middle').toggleClass('notSelect2'); 
    $('.bottom').toggleClass('notSelect3'); 
    }); 

    $('.middle').hover(function() { 
    $('.top').toggleClass('notSelect'); 
    $('.bottom').toggleClass('notSelect2'); 
    }); 

    $('.bottom').hover(function() { 
    $('.middle').toggleClass('notSelect'); 
    $('.top').toggleClass('notSelect3'); 
    }); 
});