慕雪芸茗
2016-11-02 15:30:01浏览 4833
CSS 气泡写法
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tooltip</title>
<style>
.triangle{
width:0;
height:0;
border-width:0 50px 50px;
border-style:solid;
border-color:transparent transparent #999;
margin: -50px auto;
position:relative;
}
.triangle span{
display:block;
width:0;
height:0;
border-width:0 49px 49px;
border-style:solid;
border-color:transparent transparent #2B9FF8;
position:absolute;
top:1px;
left:-49px;
}
.tooltip {
width: 400px;
height: 250px;
border: solid #999 1px;
margin: 200px auto;
background-color: #2B9FF8;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="tooltip">
<div class="triangle">
<span></span>
</div>
</div>
</body>
</html>
代码效果：