Come rendere la bolla reattiva con il triangolo sul sito sinistro

Question

Cerco di creare una bolla che sia reattiva indipendentemente dal dispositivo dell'utente e che abbia un triangolo sul sito sinistro.

come dovrebbe assomiglia:

Quello che ho cercato:

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>

cosa non funziona:
Sembra bolla se stesso è responsive correc ma ho un problema con il triangolo sul sito sinistro, non è sulla posizione giusta, dipende dalla bolla.

DEMO:
Per demo ho cambiato confine e così via solo per fornire maggiori dettagli: https://jsfiddle.net/jkdurdjr/2/

Ecco chi può dirmi che cosa sto facendo male?

Answer 1

La domanda che ho collegato nei commenti è un po 'troppo complessa per il tuo caso e deve essere adattata molto per adattarsi al tuo caso. C'è una soluzione molto più semplice per il tuo caso e quindi la sto aggiungendo separatamente.

Semplicemente non è necessario utilizzare le funzioni calc per posizionare la freccia qui. Tutto ciò che serve è che la freccia sia posizionata rispetto allo top e allo left in base alle sue dimensioni e a quelle del suo genitore. Impostare top come -4px dove è necessario -4px per spostare l'elemento di n. di pixel uguale a border-top della sua madre. Generalmente quando i bambini vengono aggiunti, viene posizionato sotto il border del genitore e quindi dobbiamo compensare per questo. Allo stesso modo l'offset deve essere fatto per il bordo sinistro del genitore anche + l'intera freccia deve essere visibile e quindi lo sfalsiamo a sinistra di -22px che non è altro che lo (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

si è molto vicino, ho cambiato il border-width e sostituito bottom con 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; 
} 

violino: https://jsfiddle.net/jkdurdjr/9/

Answer 3

ho cambiato il tuo stile CSS e sembra come ti aspettavi: https://jsfiddle.net/940vaade/

La differenza principale è nelle proprietà bottom e left. Sono basati sulle dimensioni del triangolo (proprietà border-width).

Avviso Ho cambiato larghezza e altezza (sono in em unità, non px). Inoltre, nel tuo CSS, il raggio di confine per .responsive-bubble aveva valori diversi (20px con prefissi, 0px senza prefisso).