前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图：
小颖当时大概的给她说了下，其实小颖也不知道上面那个三角形怎么画嘻嘻，给她说了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: 1; z-index: 1060; 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: 0; height: 0; 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: 0; } .triangle.down:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-width: 10px; border-bottom-width: 0; } .triangle.top { top: -10px; margin-left: 51px; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, .25); border-top-width: 0; } .triangle.top:after { top: 1px; bottom: 1px; margin-left: -10px; content: " "; border-width: 10px; border-top-width: 0; 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: 0; 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: 0; 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: 0; } .triangle.right:after { content: " "; border-width: 10px; bottom: -10px; left: 1px; border-right-color: #fff; border-left-width: 0; } </style>