纯CSS制作冒泡提示框

朴灿烈づ我的快乐病毒、 2022-08-14 01:35 168阅读 0赞

来源：[http://www.ido321.com/1214.html][http_www.ido321.com_1214.html]

![Center][]

前两天翻译了一篇文章，关于利用css的border属性制作基本图形：[http://www.ido321.com/1200.html][http_www.ido321.com_1200.html]

在此基础上，今天分享一篇文章给大家，如果利用CSS制作冒泡提示框。

先看2张效果图：

![Center 1][]![Center 2][]

CSS：

/*
     对话气泡
     用法：使用.speech-bubble和.speech-bubble-DIRECTION类
     <div class="speech-bubble speech-bubble-top">Hi there</div>
    */
     
    .speech-bubble {
      position: relative;
      background-color: #292929;
     
      width: 200px;
      height: 150px;
      line-height: 150px; /* 垂直居中 */
      color: white;
      text-align: center;
      border-radius: 10px;
      font-family: sans-serif;
    }
     
    .speech-bubble:after {
      content: '';
      position: absolute;
     
      width: 0;
      height: 0;
     
      border: 15px solid;
    }
     
    /* 箭头的位置 */
    .speech-bubble-top:after {
      border-bottom-color: #292929;
      left: 50%;
      bottom: 100%;
      margin-left: -15px;  
    }
    .speech-bubble-right:after {
      border-left-color: #292929;
     
      left: 100%;
      top: 50%;
      margin-top: -15px;   
    }
     
    .speech-bubble-bottom:after {
      border-top-color: #292929;
      top: 100%;
      left: 50%;
      margin-left: -15px;  
    }
     
    .speech-bubble-left:after {
      border-right-color: #292929;
      top: 50%;
      right: 100%;
      margin-top: -15px;   
    }

HTML：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="maopao.css">
            <title>Test</title>
        </head>
        <body>
            <div class="speech-bubble speech-bubble-top">
                箭头在顶部
            </div>
             <br/>
            <div class="speech-bubble speech-bubble-bottom">
                箭头在底部
            </div>
            <br/>
            <div class="speech-bubble speech-bubble-left">
                箭头在左侧
            </div>
             <br/>
            <div class="speech-bubble speech-bubble-right">
                箭头在右侧
            </div>
        </body>
    </html>

演示地址：[http://jsfiddle.net/80r9kjs2/embedded/result/][http_jsfiddle.net_80r9kjs2_embedded_result]

## [下一篇：PHP:产生不重复随机数的方法 ][PHP_] ##

[http_www.ido321.com_1214.html]: http://www.ido321.com/1214.html
[Center]: /images/20220810/4641e07e4dfa4582ac3902f75898b275.png
[http_www.ido321.com_1200.html]: http://www.ido321.com/1200.html
[Center 1]: https://img-blog.csdn.net/20141118115322299?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220810/ca7727462fa64679b0a7a54288410e5a.png
[http_jsfiddle.net_80r9kjs2_embedded_result]: http://jsfiddle.net/80r9kjs2/embedded/result/
[PHP_]: http://www.ido321.com/1217.html