How to make responsive bubble with triangle on left site

Question

I try to make a bubble which will be responsive no matter on user device and also it have a triangle on left site.

How it should looks like:

What I tried:

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>

What doesn't work:
It looks like bubble it self is responsive correctly, but I have problem with triangle on left site, it's no on right position depend on bubble.

DEMO:
For demo I changed border and so on just to provide more details: https://jsfiddle.net/jkdurdjr/2/

Is here anyone who can tell me what I'm doing wrong?

Answer 1

The question that I linked in comments is a bit too complex for your case and it needs to be adapted a lot to fit your case. There is a much simpler solution for your case and so I'm adding it separately.

There is simply no need to use calc functions for positioning the arrow here. All that is needed is for the arrow to be positioned with respect to the top and the left based on its dimensions and that of its parent. Set top as -4px where -4px is needed to move the element up by no. of pixels equal to the border-top of its parent. Generally when children are added, it gets positioned below the border of the parent and so we need to offset for it. Similarly the offset needs to be done for the left border of the parent also + the entire arrow needs to be visible and so we offset it to the left by -22px which is nothing but the (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

I changed your CSS style and it looks as you expected: https://jsfiddle.net/940vaade/

The main difference is in, bottom and left properties. They are based on your triangle dimensions (border-width property).

Notice I‘ve changed widths and heights (they are in em units, not px). Also, in your CSS, border radius for .responsive-bubble had different values (20px with prefixes, 0px without prefix).

Answer 3

You are very close, I changed the border-width and replaced bottom with 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;
}

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