css 实现聊天气泡样式。超简单伪元素

最新推荐文章于 2025-04-17 13:45:25 发布

书山有路_邓

最新推荐文章于 2025-04-17 13:45:25 发布

阅读量451

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_41497075/article/details/139514778

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Shape</title>
  <style>
    .speech-bubble {
      position: relative;
      background: white;
      border-radius: 10px;
      padding: 20px;
      width: 300px;
      height: 150px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-top: 30px;
    }

    .speech-bubble::before {
      content: '';
      position: absolute;
      top: 0;
      /* 左右移动 */
      left: 20px;
      width: 0;
      height: 0;
      /* 控制图形大小 */
      border: 50px solid transparent;
      border-bottom-color: white;
      border-top: 0;
      border-left: 0;
      /* 左右移动 */
      margin-left: -10px;
      margin-top: -13px;
      transform: rotate(60deg);
    }
  </style>
</head>

<body style="background: #ccc;">
  <div class="speech-bubble">
    <!-- 内容可以放在这里 -->
  </div>
</body>

</html>