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