小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS。
画出来是介个酱紫的：
有没有觉得画的萌萌哒，嘻嘻
不贫了，我们一起看代码吧!啦啦啦啦啦啦啦
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .arrow_box { position: relative; border: 1px solid #c2e1f5; padding: 10px; width: 200px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin: 50px; float: left; } .arrow_box:before, .arrow_box:after { position: absolute; display: block; width: 0; height: 0; border: solid transparent; pointer-events: none; content: ""; border-color: rgba(136, 183, 213, 0); } .arrow_box.down:before { border-bottom-color: #c2e1f5; border-width: 12px; left: 49%; margin-left: -10px; bottom: 100%; } .arrow_box.down:after { border-bottom-color: #fff; border-width: 10px; left: 50%; margin-left: -10px; bottom: 100%; } .arrow_box.up:before { border-top-color: #c2e1f5; border-width: 12px; left: 49%; margin-left: -10px; top: 100%; } .arrow_box.up:after { border-top-color: #fff; border-width: 10px; left: 50%; margin-left: -10px; top: 100%; } .arrow_box.left:before { border-left-color: #c2e1f5; border-width: 13px; top: 38%; left: 100%; } .arrow_box.left:after { border-left-color: #fff; border-width: 10px; top: 41%; left: 100%; } .arrow_box.right:before { border-right-color: #c2e1f5; border-width: 13px; top: 38%; right: 100%; } .arrow_box.right:after { border-right-color: #fff; border-width: 10px; top: 41%; right: 100%; } </style> </head> <body> <div class="popovers-body"> <div class="arrow_box down"></div> <div class="arrow_box up"></div> <div class="arrow_box left"></div> <div class="arrow_box right"></div> </div> </body> </html>