使用css画一个气泡聊天框

最新推荐文章于 2025-03-29 10:41:12 发布

BUG_Jia

最新推荐文章于 2025-03-29 10:41:12 发布

阅读量191

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/BUG_Jia/article/details/145511325

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 300px;
        height: 200px;
        margin: 100px auto;
        background: #ccc;
        /* 设置宽高 ，先利用 border 实现一个四方形 */
        /* border: 1px solid black; */
        border-radius: 5px;
        position: relative;
      }
      span {
        display: block;
        width: 0px;
        height: 0px;
        /* border: 20px solid; */
        /* 设置宽高为 0 ，利用 border 实现一个小三角形 */
        /* 并且设置一个方向的 border-color 与父元素的边框颜色一致 */
        border-color: transparent black transparent transparent;
        /* 利用定位 */
        position: absolute;
        left: -40px;
        top: 20px;
      }
      em {
        display: block;
        width: 0px;
        height: 0px;
        border: 20px solid;
        /* 设置宽高为 0 ，利用 border 实现一个小三角形 */
        /* 并且设置一个方向的 border-color 与父元素的背景色一致 */
        border-color: transparent #ccc transparent transparent;
        /* 利用定位 */
        position: absolute;
        left: -39px;
        top: 20px;
      }

      .pop {
        position: relative;
        background: red;
        border-radius: 5px;
        color: #000;
        filter: drop-shadow(0px 0px 5px #000);
      }
      .pop::before {
        content: "";
        background: red;
        position: absolute;
        width: 20px;
        height: 20px;
        transform: rotate(45deg);
        left: -10px;
        top: 50px;
        margin-top: -10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <em></em>
    </div>

    <div class="pop"></div>
  </body>
</html>

运行代码有两个气泡框，一个带阴影一个不带阴影