सीएसएस त्रिभुज पक्ष बाईं ओर दौर के साथ?

Question

मैं इसे नीचे के रूप में बनाने की कोशिश कर रहा हूं और इसे समाप्त नहीं कर सका।

मैं केवल बाएं ओर एक गोलाकार कोनों का निर्माण कर सकता हूं लेकिन सही नहीं था।

align top http://www.kerrydeaf.com/arrow.png

#talkbubble 
{ 
width: 100px; 
height: 35px; 
background: #FFCC05; 
position: relative; 
-moz-border-radius:8px 0 0 8px; 
-webkit-border-radius:8px 0 0 8px; 
border-radius:8px 0 0 8px; 
margin-right:50px; 
} 

या यहाँ http://jsfiddle.net/alma/USezL/23/

Answer 1

है मुझे लगता है कि यह है कि क्या यू के लिए http://css-tricks.com/snippets/css/css-triangle/

http://jsfiddle.net/zQKhb/

#talkbubble 
{ 
    width: 100px; 
    height: 36px; 
    background: #FFCC05; 
    position: relative; 
    -moz-border-radius:8px 0 0 8px; 
    -webkit-border-radius:8px 0 0 8px; 
    border-radius:8px 0 0 8px; 
    margin-right:50px; 

} 

#talkbubble:before 
{ 
    content:""; 
    display:block; 
    position: absolute; 
    right: -36px; 
    top:0; 
    width: 0; 
    height: 0; 
    border: 18px solid transparent; 

    border-color: transparent transparent #FFCC05 #FFCC05; 
} 
​ 

Answer 2

आप कुछ अनदेखा कर रहे थे देख रहे है दाईं ओर अपने त्रिकोण में महत्वपूर्ण अंक। सबसे पहले, डिफ़ॉल्ट रूप से: तत्व से पहले display: inline है, इसलिए जिस प्रभाव को आप चाहते थे उसे बनाने के लिए आपको display: block की आवश्यकता है।

दूसरा, right: 120px इसे 120 पिक्सल दूर अपनी मूल स्थिति के दाहिने तरफ से ले जा रहा था। यही है, इसे बाईं तरफ धक्का दिया जा रहा था। इसके बजाय, आपको 100% (भाषण बबल की चौड़ाई) के लिए एक नकारात्मक सही स्थिति की आवश्यकता है ( दाएं)। इस तरह, यह इसके दाईं ओर समाप्त हो जाएगा।

तीसरा, सुनिश्चित नहीं है कि आप किस आकार के लिए जा रहे थे लेकिन यह लगभग सब कुछ था लेकिन त्रिकोण;)।

मैं इस बजाय के लिए चला गया:

#talkbubble:before 
{ 
    content:" "; 
    display: block; 
    position: relative; 
    right: -100%; 

    width: 0; 
    height: 0; 
    border-left: 0 solid transparent; 
    border-right: 20px solid transparent;  
    border-bottom: 35px solid #FFCC05; 
} 

पहले भाग स्थिति के लिए, दूसरा हिस्सा वास्तविक त्रिकोण (http://css-tricks.com/snippets/css/css-triangle/ देखें) पैदा कर रही है है।

jsfiddle में मैंने त्रिभुज नीला बनाया ताकि आप देख सकें कि यह कहां है। कोण को बड़ा बनाने के लिए सीमा-दाएं चौड़ाई बदलें। http://jsfiddle.net/USezL/31/