How to make a responsive bubble with a triangle on the left site

Question

I am trying to create a bubble that will respond regardless of the user device, and also has a triangle on the left site.

What it should look 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 not so many text HERE! Some shorter text come here to see how it looks when it not so many text HERE!"</div> <div class="responsive-bubble">"Some shorter text come here to see how it looks when it not so many text HERE!"</div> 

What does not work:
It seems that the bubble itself is responding correctly, but I have a problem with the triangle on the left site, it’s not in the right position, it depends on the bubble.

DEMO:
For demonstration, I changed the border and so on to provide more detailed information: https://jsfiddle.net/jkdurdjr/2/

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

Answer 1

The question that I connected in the comments is too complicated for your case, and it needs to be adapted for your case. There is a much simpler solution for your case, so I add it separately.

There is simply no need to use calc functions to place the arrow here. All that is needed is the location of the arrow relative to top and left based on its size and the size of its parent. Set top to -4px , where -4px needed to move the element up to no. pixels equal to the border-top its parent element. Usually when children are added, they are located below the border parent, and therefore we need to compensate for this. Similarly, the offset must be performed for the left border of the parent. + The whole arrow should be visible, so we shift it to the left by -22px , which is nothing more than (size of the arrow (it 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 wrt 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 not so many text HERE! Some shorter text come here to see how it looks when it not so many text HERE!"</div> <div class="responsive-bubble">"Some shorter text come here to see how it looks when it not so many text HERE!"</div> 

Answer 2

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

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

Note. I changed the width and height (they are in units of em , not px ). Also, in your CSS, the border radius for .responsive-bubble had different values ​​(20px with prefixes, 0px without prefix).

Answer 3

You are very close, I changed 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; } 

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