自己做气泡

2018-01-09 本文已影响22人尤樊容

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

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>

自己做气泡

猜你喜欢

热点阅读