前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图：
小颖当时大概的给她说了下，其实小颖也不知道上面那个三角形怎么画嘻嘻，给她说了DOM结构，具体的css让她自己百度，今天小颖自己参考bootstrap中的popover.js的css画了下那个消息弹框，希望对大家有所帮助。小颖最终画的图就是下面介个酱紫的
具体的怎么实现的，大家请看下方的css代码哦。
html:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>仿bootstrap中的popover.js的消息弹框</title>
</head> <body>
<div class="popovers-body">
<div class="popover-top">
<div class="popover">
<div class="popover-content">
向上的提示信息
</div>
</div>
<div class="triangle down"></div>
</div>
<div class="popover-down">
<div class="popover">
<div class="popover-content">
向下的提示信息
</div>
</div>
<div class="triangle top"></div>
</div>
<div class="popover-left">
<div class="popover">
<div class="popover-content">
向左的提示信息
</div>
</div>
<div class="triangle left"></div>
</div>
<div class="popover-right">
<div class="popover">
<div class="popover-content">
向右的提示信息
</div>
</div>
<div class="triangle right"></div>
</div>
</div>
</body> </html>
css:
<style media="screen">
.popover-top,
.popover-down {
width: 300px;
float: left;
position: absolute;
top: 40px;
} .popover-top,
.popover-left {
left: 50px;
} .popover-down,
.popover-right {
left: 450px;
} .popover {
opacity:;
z-index:;
padding: 1px;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto;
} .popover-content {
padding: 9px 14px;
} .triangle,
.triangle:after {
position: absolute;
display: block;
width:;
height:;
border-color: transparent;
border-style: solid;
} .triangle {
border-width: 11px;
} .triangle.down {
top: 39px;
margin-left: 51px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
border-bottom-width:;
} .triangle.down:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-width: 10px;
border-bottom-width:;
} .triangle.top {
top: -10px;
margin-left: 51px;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, .25);
border-top-width:;
} .triangle.top:after {
top: 1px;
bottom: 1px;
margin-left: -10px;
content: " ";
border-width: 10px;
border-top-width:;
border-bottom-color: #fff;
} .popover-left,
.popover-right {
width: 300px;
float: left;
position: absolute;
top: 150px;
} .triangle.left {
top: 19px;
right: -10px;
margin-top: -11px;
border-right-width:;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
} .triangle.left:after {
border-width: 10px;
right: 1px;
bottom: -10px;
content: " ";
border-right-width:;
border-left-color: #fff;
} .triangle.right {
top: 50%;
left: -10px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, .25);
border-left-width:;
} .triangle.right:after {
content: " ";
border-width: 10px;
bottom: -10px;
left: 1px;
border-right-color: #fff;
border-left-width:;
}
</style>