how to have opposite speech bubble in css and html with arrow

Question

I am trying to create a speech bubble with an arrow on the left and right side. Something like below

I have used the below CSS to achieve the same :

.speech-wrapper{
  padding: 30px 40px;
  }
.chatbox {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:3px;   
  background: #c7edfc;
  color: #000;
  position: relative;
  border-radius: 4px;  
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;


}
.chatbox_other{
padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:3px;   
  background: #D3D3D3;
  color: #000;
  position: relative;
  border-radius: 4px;  
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;


}

      .name_other{
        font-weight: 600;
        position: absolute;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
         bottom: 8px;
        right: 10px;
      }

.timestamp_other{
        font-size: 11px;
        position: absolute;
        text-align: left;
        bottom: 0px;
        left: 10px;
        text-transform: uppercase; color: #999
}       
.timestamp{
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase; color: #999
      }
/* speech bubble 13 */
      .name{
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
      }
        .bubble-arrow {
      position: absolute;
      width: 0;
      bottom:42px;
      left: -16px;
      height: 0;
      &.alt{
        right: -2px;      
        bottom: 40px;
        left: auto;
      }
    }
.bubble-arrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 9px solid #c7edfc;
      border-radius: 0 20px 0;
      width: 15px;
      height: 30px;
      transform: rotate(145deg);
    }
    .bubble-arrow.alt:after {
      transform: rotate(45deg) scaleY(-1);
    }

But for me, the arrow is missing always it always comes with a box.

I am a beginner to HTML and CSS any help on this will be appreciated. Am I doing anything wrong to draw the rectangle?

EDIT:

I can see the chat bubble on chrome and all recent browsers but when I try using the very old browsers the below statement does not decode correctly. So the chat triangle was not in the appropriate position.

 transform: rotate(145deg);
    }
    .bubble-arrow.alt:after {
      transform: rotate(45deg) scaleY(-1);
    }

HTML CODE:

<div class="speech-wrapper"><div class="chatbox"><div class="txt"><p class="name">TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div><div class="bubble-arrow alt"></div></div>

Is there anything else can I use apart from the transform

this may help you : https://stackoverflow.com/questions/50899997/curved-speech-bubble/50900118#50900118 — Temani Afif, Dec 28 '18 at 08:35
this one too: https://stackoverflow.com/questions/47956092/html-css-triangle-with-pseudo-elements/47956145#47956145 — Temani Afif, Dec 28 '18 at 08:36
@TemaniAfif Thanks but can i use anything apart from transform as transform has some issue with the old broswer — Rajesh Kumar Dash, Dec 28 '18 at 09:43
transform is something supported even with old browser : https://caniuse.com/#feat=transforms2d — Temani Afif, Dec 28 '18 at 09:46
@TemaniAfif But in my case transform: rotate(145deg); does not have any effect — Rajesh Kumar Dash, Dec 28 '18 at 09:58

score 0 · Answer 1 · answered Dec 28 '18 at 08:08

Try this,

<!doctype html>
<html>
    <head>
        <title>Chat Bubbles Demo</title>
        <style type="text/css">
            .chat-box
            {
                width: 300px;
            }

            .header
            {
                padding: 10px;
                color: white;
                font-size: 14px;
                font-weight: bold;
                background-color: #6d84b4;
            }

            .messages
            {
                padding: 10px;
                height: 200px;
                background-color: green;
                background-color: rgb(237, 239, 244);
                border-width: 1px;
                border-color: black;
                border-style: solid;
                overflow-y: scroll;
            }

            .messages ul
            {
                padding: 0px;
                list-style-type: none;
            }

            .messages ul li
            {
                height: auto;
                margin-bottom: 10px;
                clear: both;
                padding-left: 10px;
                padding-right: 10px;
            }

            .messages ul li span
            {
                display: inline-block;
                max-width: 200px;
                background-color: white;
                padding: 5px;
                border-radius: 4px;
                position: relative;
                border-width: 1px;
                border-style: solid;
                border-color: grey;
            }

            .messages ul li span.left
            {
                float: left;
            }

            .messages ul li span.left:after
            {
                content: "";
                display: inline-block;
                position: absolute;
                left: -8.5px;
                top: 7px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid white;
            }

            .messages ul li span.left:before
            {
                content: "";
                display: inline-block;
                position: absolute;
                left: -9px;
                top: 7px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid black;
            }

            .messages ul li span.right:after
            {
                content: "";
                display: inline-block;
                position: absolute;
                right: -8px;
                top: 6px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid #dbedfe;
            }

            .messages ul li span.right:before
            {
                content: "";
                display: inline-block;
                position: absolute;
                right: -9px;
                top: 6px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid black;
            }

            .messages ul li span.right
            {
                float: right;
                background-color: #dbedfe;
            }

            .clear
            {
                clear: both;
            }

            .input-box
            {
                background-color: white;
                height: 50px;
                padding: 0px;
            }

            .input-box textarea
            {
                padding: 0px;
                width: 278px;
                height: 100%;
                display: inline-block;
                outline: 0px;
                border-width: 0px;
                resize: none;
                border-width: 1px;
                border-color: black;
                border-style: solid;
                font-size: 12px;
                padding: 10px;
                border-top-width: 0px;
            }
        </style>
    </head>
    <body>
        <div class="chat-box">
            <div class="header">
                Narayan Prusty
            </div>
            
            <div id="messages" class="messages">
                <ul>
                    <li>
                        <span class="left">Hello</span>
                        <div class="clear"></div>
                    </li> 
                    <li>
                        <span class="left">Are you there?</span>
                        <div class="clear"></div>
                    </li> 
                    <li>
                        <span class="right">Yes I am here</span>
                        <div class="clear"></div>
                    </li> 
                    <li>
                        <span class="left">Thanks for accepting my friend request</span>
                        <div class="clear"></div>
                    </li> 
                    <li>
                        <span class="right">You Welcome</span>
                        <div class="clear"></div>
                    </li> 
                    <li>
                        <span class="left">Bye</span>
                        <div class="clear"></div>
                    </li> 
                </ul>
                <div class="clear"></div>
            </div>
            
            <div class="input-box">
                <textarea placeholder="Enter message"></textarea>
            </div>
        </div>
    </body>
</html>

how to have opposite speech bubble in css and html with arrow

1 Answers1