सीएसएस 3 - राज्यों के बाद और उससे पहले गोलाकार कोनों

Question

मुझे सीएसएस 3 के साथ एक छोटी सी समस्या है, अर्थात् मैं एक वस्तु के साथ ऐसी वस्तु बनाउंगा। यहाँ मैं क्या हासिल करना चाहते की एक छवि है:

यहाँ है कि मैं क्या:

सीएसएस:

body{ 
background:grey; 
    padding:10px; 
} 
#talkbubble { 
margin:0 auto; 
box-shadow: 3px 10px 7px #deefe5; 
    width: 590px; 
    height: 160px; 
    background: white; 
    position: relative; 
    border-radius:10px; 
    border-bottom-left-radius:0px; 
} 
#talkbubble:before { 
box-shadow: 10px 10px 5px #deefe5; 
    content:""; 
    position: absolute; 
    background:white; 
    top: 100%; 
    width: 228px; 
    height: 62px; 
    border-bottom-left-radius:   10px; 
    border-bottom-right-radius:   10px; 

} 
#talkbubble:after{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    border-top: 10px solid white; 
    border-right: 10px solid transparent; 
    background:white; 


}​ 

एचटीएमएल:

<div id="talkbubble"></div>​ 

और jsFiddle demo

मैं दो हिस्सों के बीच कोण को कैसे घुमा सकता हूं?

Answer 1

संक्षिप्त उत्तर: आप नहीं कर सकते।

आपने जो किया है, वहां सफलतापूर्वक एक बॉक्स बनाया गया है: DIV तत्व के बाद, लेकिन यदि आप DIV में टेक्स्ट दर्ज करना प्रारंभ करते हैं तो यह नीचे अनुभाग में "प्रवाह" नहीं करेगा।

जो आप CSS3 में लक्षित कर रहे हैं उसे प्राप्त करने के लिए आपको कम से कम 3 डीआईवी और पारदर्शिता प्रभाव की आवश्यकता होगी, और आपको अभी भी टेक्स्ट ओवरफ्लोइंग के साथ समस्या होगी।

Answer 2

here से

लिया जानकारी आप इस प्राप्त कर सकते हैं:

body 
{ 
    background:grey; 
    padding:10px; 
} 
#talkbubble 
{ 
    margin:0 auto; 
    box-shadow: 3px 10px 7px #deefe5; 
    width: 590px; 
    height: 160px; 
    background: white; 
    position: relative; 
    border-radius:10px; 
    border-bottom-left-radius:0px; 
} 
#talkbubble:before 
{ 
    box-shadow: 10px 10px 5px #deefe5; 
    content:""; 
    position: absolute; 
    background:white; 
    top: 95%; 
    width: 228px; 
    height: 62px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
} 
#talkbubble:after 
{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px); 
    width: 10px; 
    height: 10px; 
}​ 

http://jsfiddle.net/uCRMQ/2

// बस पृष्ठभूमि छाया काम नहीं करता। अब पृष्ठभूमि छाया इस के लिए काम करती है (इस आकार में)।

एलजी
warappa

Answer 3

Worx एक आकर्षण की तरह: http://jsfiddle.net/42DJh/7/

सिर्फ इस के साथ बदलें:

#talkbubble:after{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    border-top: 10px solid white; 
    border-right: 10px solid transparent; 
    border-top: 10px solid transparent; 
    border-left: 10px solid transparent; 
    border-top-left-radius:10px; 
    background:transparent; 
    box-shadow: -3px -3px 1px white; 
}