html - 如何在 css 和 html 中用箭头设置相反的语音气泡-6ren

html - 如何在 css 和 html 中用箭头设置相反的语音气泡

转载作者：行者123 更新时间：2023-11-28 00:39:23

我正在尝试创建一个左右两侧带有箭头的对话框。像下面这样的东西

我已经使用下面的 CSS 来实现同样的效果:

.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);
    }

但对我来说，箭头总是不见了，它总是带有一个盒子。

我是 HTML 和 CSS 的初学者，我们将不胜感激。我在绘制矩形时做错了什么吗？

编辑:

我可以在 chrome 和所有最新的浏览器上看到聊天气泡，但是当我尝试使用非常旧的浏览器时，以下语句无法正确解码。所以聊天三 Angular 不在合适的位置。

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

HTML 代码:

<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>

除了transform

还有什么我可以用的吗

最佳答案

试试这个，

<!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>

关于html - 如何在 css 和 html 中用箭头设置相反的语音气泡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53955351/

文章推荐： html - 过渡动画期间移动的文本

文章推荐： html - 当加载程序到达表单顶部时，表单位置正在改变

文章推荐： css - 网格列 fr 不适用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在 css 和 html 中用箭头设置相反的语音气泡