<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tag{
width:300px;
height:100px;
border:5px solid #09F;
position:relative;
background-color:#FFF;
}
.tag:before,.tag:after{
content:"";display:block;
border-width:20px;
position:absolute; bottom:-40px;
left:100px;
border-style:solid dashed dashed;
border-color:#09F transparent transparent;
font-size:0;
line-height:0;
}
.tag:after{
bottom:-33px;
border-color:#FFF transparent transparent;
}
</style>
</head>
<body>
<div class="tag">
css3氣泡框
</div>
</body>
</html> 如圖所示：
稍微修改修改，就可以得到自己想要的小氣泡彈框呦！ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tag{
width: 280px;
height: 80px;
border: 1px solid #50e3c2;
position: relative;
background-color: #69748b;
border-radius: 5px;
color: #fff;
text-align: center;
padding: 20px 10px;
}
.tag:before,.tag:after{
content:"";display:block;
border-width:15px;
position:absolute; bottom:-31px;
left:100px;
border-style:solid dashed dashed;
border-color:#50e3c2 transparent transparent;
font-size:0;
line-height:0;
}
.tag:after{
bottom:-30px;
border-color:#69748b transparent transparent;
}
</style>
</head>
<body>
<div class="tag">
css3氣泡框
</div>
</body>
</html> 如圖所示：
|
