左のサイトで三角形を使って敏感なバブルを作る方法

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しかし、私は左のサイトの三角形に問題がある、それはバブルに依存する正しい位置にない。

DEMO：デモの
私は境界線を変更し、これだけ多くの詳細を提供するために： https://jsfiddle.net/jkdurdjr/2/

は、ここで私が間違ってやっているものを私に伝えることができます誰ですか？

Answer 1

コメントにリンクされている質問は、あなたのケースではやや複雑すぎて、あなたのケースに合わせて調整する必要があります。あなたのケースには、はるかに簡単な解決策がありますので、私は別にそれを追加しています。

ここで矢印を配置するためにcalc関数を使用する必要はありません。必要なことは矢印の寸法がtopおよびleftに対して、その寸法とその親の寸法に基づいて位置決めされることだけである。 topを-4pxと設定します.は、要素をnoに移動するために必要です。その親の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を交換し、非常に接近している：私はあなたのCSSスタイルを変更し、それのように見えますhttps://jsfiddle.net/jkdurdjr/9/

Answer 3

あなたは期待しました： https://jsfiddle.net/940vaade/

主な違いは、bottomとleftです。それらは三角形の寸法（border-widthプロパティ）に基づいています。

通知幅と高さを変更しました（em単位ではなく、px）。また、あなたのCSSでは、.responsive-bubbleのボーダー半径は異なる値を持っていました（接頭辞付き20px、接頭辞なし0px）。