自己做气泡

作者: 尤樊容 | 来源:发表于2018-01-09 14:18 被阅读22次

自己做气泡
2019-02-18
做气泡胶
原子论文
八大思维图示：双气泡图
韩国大气泡毛孔清洁仪全新上市，厂家现货特惠来袭！
5/22打卡
气泡音 - 给声带做马杀鸡
阴暗它找不到光
【UX专题】说明气泡Tooltips

项目中总是会用到气泡啥的，使用图片不如自己写一个方便，那么写下来我就甩上我的代码，一般都是自己用来取，要是有人也要来取那是极好的。
效果图在这里（用了红色，快过年了！！！）：

image.png

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bubble{
            width: 200px;
            height: 100px;
            border: 3px solid #f00;
            box-shadow: #ccc 3px 3px 3px;
            text-align: center;
            line-height: 100px;
            border-radius: 15px;
            position: relative;
        }

        .left{
            width:500px;
        }

        /*第一个气泡*/
        #bubble1{
            margin: 100px auto;
        }

        #bubble1:before{
            content: '';
            position: absolute;
            left: 30px;
            bottom: -50px;
            border: 25px solid;
            border-color: #f00 transparent transparent #f00;
        }

        /*第二个气泡*/
        #bubble2{
            margin: 0 auto;
        }

        #bubble2:before{
            content: '';
            position: absolute;
            left: 30px;
            bottom: -50px;
            border: 25px solid;
            border-color: #f00 transparent transparent #f00;
        }

        #bubble2:after{
            content: '';
            position: absolute;
            left: 33px;
            bottom: -42px;
            border: 25px solid;
            border-color: #fff transparent transparent #fff;
        }

        /*第三个气泡*/
        #bubble3{
            margin: 100px auto;
        }

        #bubble3:before{
            content: '';
            position: absolute;
            left: -50px;
            bottom: 25px;
            border: 25px solid;
            border-color: #f00 #f00 transparent transparent;
        }

        #bubble3:after{
            content: '';
            position: absolute;
            left: -43px;
            bottom: 22px;
            border: 25px solid;
            border-color: #fff #fff transparent transparent;
        }

        /*第四个气泡*/
        #bubble4{
            margin: 100px auto;
        }

        #bubble4:before{
            content: '';
            position: absolute;
            right: -50px;
            bottom: 25px;
            border: 25px solid;
            border-color: #f00 transparent transparent #f00;
        }

        #bubble4:after{
            content: '';
            position: absolute;
            right: -43px;
            bottom: 22px;
            border: 25px solid;
            border-color: #fff transparent transparent #fff;
        }


    </style>

</head>

<script src="../js/jquery-1.7.2.js"></script>
<body>
<div class="left">
    <div id="bubble1" class="bubble">
        自己做的气泡1
    </div>
    <div id="bubble2" class="bubble">
        自己做的气泡2
    </div>

    <div id="bubble3" class="bubble">
        自己做的气泡3
    </div>

    <div id="bubble4" class="bubble">
        自己做的气泡4
    </div>
</div>

</body>
</html>