बाएं साइट पर त्रिकोण के साथ उत्तरदायी बबल कैसे बनाएं

Question

मैं एक बबल बनाने की कोशिश करता हूं जो उत्तरदायी होगा उपयोगकर्ता डिवाइस पर कोई फर्क नहीं पड़ता और इसके बाएं साइट पर एक त्रिकोण भी है।

कैसे यह होना चाहिए लगता है कि:

मैं क्या करने की कोशिश की:

HTML:

.responsive-bubble { 
 
    position: relative; 
 
    display: inline-block; 
 
    max-width: 80%; 
 
    min-width: 80%; 
 
    min-height: 1.5em; 
 
    padding: 20px; 
 
    background: #ebebeb; 
 
    border: #ebebeb solid 4px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 0px; 
 
    border-style: solid; 
 
    float: right; 
 
} 
 
.responsive-bubble:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: calc(89% - 3px); 
 
    left: calc(-4% - 3px); 
 
    border-style: solid; 
 
    border-width: 18px 18px 0; 
 
    border-color: #7F7F7F transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
}

<div class="responsive-bubble">“And here comes some really long text which doesnt mean anything however it have to be long to provide a lot of characters and see how this buble works when long text is here and even when nearly no text is here and so on. I hope you know what I mean 
 
    So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!”</div> 
 
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE! Some shorter text come here to see how it looks when it's not so many text HERE!”</div> 
 
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE!”</div>

क्या काम नहीं करता:
ऐसा लग रहा है बबल यह स्वयं उत्तरदायी correc है टली, लेकिन मुझे बाईं ओर त्रिकोण के साथ समस्या है, यह सही स्थिति पर नहीं है बुलबुले पर निर्भर करता है।

डेमो:
डेमो मैं सीमा बदल गया है और इतने पर के लिए बस उपलब्ध कराने के लिए और अधिक जानकारी के: https://jsfiddle.net/jkdurdjr/2/

यहां जो कोई मुझे बता सकते हैं मैं गलत क्या कर रहा है?

Answer 1

प्रश्न जो मैंने टिप्पणियों में लिंक किया है वह आपके मामले के लिए थोड़ा जटिल है और इसे आपके मामले में फिट करने के लिए बहुत कुछ अनुकूलित करने की आवश्यकता है। आपके मामले के लिए एक बहुत ही आसान समाधान है और इसलिए मैं इसे अलग से जोड़ रहा हूं।

यहां तीर की स्थिति के लिए calc फ़ंक्शंस का उपयोग करने की आवश्यकता नहीं है। इसकी आवश्यकता है तीर को top और left के संबंध में इसके आयामों और उसके माता-पिता के आधार पर रखा जाना है। top-4px के रूप में सेट करें जहां -4px को तत्व को स्थानांतरित करने के लिए आवश्यक है। अपने माता-पिता के border-top के बराबर पिक्सल का। आम तौर पर जब बच्चे जोड़े जाते हैं, तो यह माता-पिता के border से नीचे स्थित होता है और इसलिए हमें इसके लिए ऑफ़सेट करना होगा। इसी प्रकार ऑफसेट को माता-पिता की बाएं सीमा के लिए भी किया जाना चाहिए + पूरे तीर को दृश्यमान होने की आवश्यकता है और इसलिए हम इसे -22px द्वारा बाईं ओर ऑफसेट करते हैं जो (size of the arrow (it's border width) + the left border of parent) * -1 के अलावा कुछ भी नहीं है।

.responsive-bubble { 
 
    position: relative; 
 
    display: inline-block; 
 
    max-width: 80%; 
 
    min-width: 80%; 
 
    min-height: 1.5em; 
 
    padding: 20px; 
 
    background: #ebebeb; 
 
    border: #ebebeb solid 4px; 
 
    border-radius: 5px; 
 
    border-color: #ebebeb; 
 
    border-style: solid; 
 
    float: right; 
 
    margin-bottom: 10px; 
 
} 
 
.responsive-bubble:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -4px; /* just set it w.r.t to top, where the value is negative of border-top */ 
 
    left: -22px; /* this needs to be inverse of border-width of this element + border-left of parent */ 
 
    border-style: solid; 
 
    border-width: 18px 18px 0; 
 
    border-color: #ebebeb transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
}

<div class="responsive-bubble">“And here comes some really long text which doesnt mean anything however it have to be long to provide a lot of characters and see how this buble works when long text is here and even when nearly no text is here and so on. I hope you know what I mean 
 
    So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!”</div> 
 
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE! Some shorter text come here to see how it looks when it's not so many text HERE!”</div> 
 
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE!”</div>

Answer 2

आप कर रहे हैं बहुत करीब है, मैं border-width बदल गया है और top

.responsive-bubble:before { 
    content: ""; 
    position: absolute; 
    top:0;    // relative to top, not to the bottom 
    left: calc(-4% - 3px); 
    border-style: solid; 
    border-width: 25px 0 0 25px; // second 0 referrs to the right side, 3rd to the top 
    border-color: #7F7F7F transparent; 
    display: block; 
    width: 0; 
    z-index: 0; 
} 

बेला के साथ bottom लाए गए: https://jsfiddle.net/jkdurdjr/9/

Answer 3

मैं अपने सीएसएस शैली बदल गया और यह के रूप में लग रहा है आपने उम्मीद की: https://jsfiddle.net/940vaade/

मुख्य अंतर bottom और left गुणों में है। वे आपके त्रिकोण आयामों पर आधारित हैं (border-width संपत्ति)।

नोटिस मैंने चौड़ाई और ऊंचाई बदल दी है (वे em इकाइयों में हैं, px नहीं)। इसके अलावा, आपके सीएसएस में, .responsive-bubble के लिए सीमा त्रिज्या के अलग-अलग मान थे (उपसर्ग के साथ 20px, उपसर्ग के बिना 0px)।