CSS3 उलटा घुमावदार कॉर्नर

Question

क्या CSS3 में उलटा गोलाकार कोने करने का कोई तरीका है, लगभग नीचे (कच्चे) ड्राइंग में नीचे बाएं कोने की तरह कुछ है?

/-------\ 
|  | 
|  | 
|  | 
| ______/ 
|/ <---The left side is flush (straight), the slant should be rounded 

शायद सीमा-त्रिज्या this technique के साथ जोड़ा जा सकता है?

संपादित करें: मैं भाषण बबल की तलाश नहीं कर रहा हूं, बल्कि नीचे बाईं ओर बिंदु के दाईं ओर घुमाने के लिए एक तरीका है।

Answer 1

खैर, यह शुद्ध पागलपन है, लेकिन निश्चित रूप से वहाँ इस लक्ष्य को हासिल करने के लिए तरीके हैं :-) नहीं पार browserly, लेकिन चलो देखते हैं:

हमारी मार्क-अप:

<div id="bubble"> 
    <p>This is madness!</p> 
</div> 

हमारे सीएसएस:

#bubble { 
    width:200px; 
    height:100px; 
    border:1px solid #000; 
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    border-radius:20px; 
} 
    #bubble p { 
     margin: 1em; 
     font-family:Comic Sans MS;/* well, madness it is! */ 
    } 
#bubble:before { 
    content:''; 
    border:20px solid; 
    border-color:#fff transparent transparent; 
    position:absolute; 
    top:110px; 
    left:25px; 
    z-index:2; 
} 
#bubble:after { 
    content:''; 
    border:20px solid; 
    border-color:#000 transparent transparent; 
    position:absolute; 
    top:111px; 
    left:25px; 
    z-index:1; 
} 

परिणाम: http://jsfiddle.net/MrLWY/

मैं केवल फ़ायरफ़ॉक्स 3.6.3 में यह परीक्षण किया है, लेकिन यह विचार स्पष्ट :-)

है यहाँ दो ले:

#bubble { 
    width:200px; 
    height:100px; 
    border:1px solid #000; 
    position:relative; 
    -webkit-border-radius:20px 20px 20px 0; 
    -moz-border-radius:20px 20px 20px 0; 
    border-radius:20px 20px 20px 0; 
} 
    #bubble p { 
     margin: 1em; 
     font-family:Comic Sans MS; 
    } 
#bubble:before { 
    content:''; 
    width:20px; 
    height:20px; 
    background:#fff; 
    border-left:1px solid #000; 
    position:absolute; 
    top:100px; 
    left:-1px; 
} 
#bubble:after { 
    content:''; 
    -webkit-border-radius:20px 0 0 0; 
    -moz-border-radius:20px 0 0 0; 
    border-radius:20px 0 0 0; 
    border:solid #000; 
    border-width:1px 0 0 1px; 
    width:20px; 
    height:19px; 
    position:absolute; 
    top:100px; 
    left:0; 
} 

और परिणाम: http://jsfiddle.net/ajeN7/

शायद यह कई मायनों में बढ़ाया जा सकता है:

• इसे क्रॉस-ब्राउजर (+ वेबकिट और ओपेरा, कम से कम)
• यह आईईएस में बिना किसी गोल के काम कर सकता है, हालांकि http://code.google.com/p/ie7-js/ (काम करने के लिए जेनरेट की गई सामग्री के लिए) की मदद से।
• यह पता लगाने के लिए कि यह लचीला ऊंचाई के साथ कैसे काम कर सकता है।
• :-)

Answer 2

अगर आप देखो उस तरह प्राप्त करने के लिए कोशिश कर रहे हैं (एक भाषण के गुब्बारे) यह सबसे अच्छा है कि अभी :) के लिए एक छवि का उपयोग करने के

Answer 3

यह एफएफ में प्रभाव को प्राप्त होता है font-family घोषणा बदलने के लिए। अन्य ब्राउज़रों के लिए उचित border-radius प्रकारों का उपयोग करें। अनिवार्य रूप से आप 3 div सिस्टम का उपयोग करते हैं, एक पृष्ठभूमि के समान रंग के साथ। केवल एक फ्लैट रंग के साथ पृष्ठभूमि के लिए काम करता है।

<div class="top">some text here</div> 
<div class="bottom"><div class="bottom2"></div></div> 

और सीएसएस:

Gryzzlys पहला उदाहरण अलग पृष्ठभूमि संभाल नहीं किया:

body 
    { 
    background-color:red; 
    } 

.top 
    { 
    display: block; 
    width: 200px; 
    height: 50px; 
    background-color:white; 
    padding:5px; 

    -moz-border-radius-topleft:10px; 
    -moz-border-radius-topright:10px; 
    -moz-border-radius-bottomright:10px; 
    } 

.bottom 
    { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-color: white;  
    } 

.bottom2 
    { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-color: red; 
    -moz-border-radius-topleft:20px; 
    } 

Answer 4

मैं अभी तक टिप्पणी नहीं कर सकते, लेकिन इतना यहाँ (Gryzzlys जवाब के संबंध में) एक नया जवाब रंग (पृष्ठभूमि और बुलबुले के लिए)।

लेकिन दूसरा दूसरा करता है।यहाँ लागू किया पृष्ठभूमि रंग के साथ एक उदाहरण है:

http://jsfiddle.net/tGnfb/

(मैं भी बॉर्डर-त्रिज्या गुण जोड़ा इतना है कि यह Firefox के अलावा ब्राउज़र के लिए सीमाओं प्रस्तुत करना होगा)।

Answer 5

केवल सीएसएस का उपयोग करके आप इस समस्या को हल कर सकते हैं। मैंने टैब के लिए तकनीक का उपयोग करने का निर्णय लिया है - लेकिन भाषण बुलबुले के लिए आसानी से अनुकूलित किया जा सकता है।

मैं Inverse Border Radius in CSS (here) बनाने के तरीके के बारे में यहां एक मूल उदाहरण को कवर करता हूं। यह अंदरूनी उपयोग के लिए सीमा के आकार के साथ एक चाल का उपयोग करता है, आपको इसे ठीक से काम करने के लिए कुछ पोजिशनिंग करना पड़ सकता है, हालांकि आप इसे संभव देख सकते हैं।