CSS 实现气泡框

最新推荐文章于 2024-08-30 10:03:46 发布

MAIMIHO

最新推荐文章于 2024-08-30 10:03:46 发布

阅读量3k

点赞数 1

分类专栏： Web 文章标签： css 前端 html

本文链接：https://blog.csdn.net/maimiho/article/details/130416705

版权

Web 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

这段代码展示了如何使用HTML和CSS创建一个具有底部箭头的气泡对话框。气泡有固定宽度，黑色背景，白色文本，以及自定义的边框和圆角。CSS伪元素`::before`和`::after`被用来生成底部的箭头效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin-top: 100px;
      margin-left: 100px;
      background-color: black;
    }

    .bubble {
      position: relative;
      padding: 20px 12px;
      font-size: 20px;
      line-height: 26px;
      color: #c0e3ff;
      background: #122648;
      border: 1px solid #4e637e;
      border-radius: 10px;
    }

    .bubble::before,
    .bubble::after {
      position: absolute;
      bottom: -20px;
      left: calc(50% - 10px);
      display: block;
      font-size: 0;
      line-height: 0;
      border-color: #4e637e transparent transparent;
      border-style: solid;
      border-width: 10px;
      content: "";
    }

    .bubble::after {
      bottom: -19px;
      border-color: #122648 transparent transparent;
    }
  </style>
  <body>
    <div class="bubble" style="width: 200px">Hello World!</div>
  </body>
</html>