html自定义提示框
自定义html提示框比较令人困惑的就是编写三角形的样式;以前的实现方式是在标签内使用span标签来实现。不过现在有了css提供的两个为类:before,:after之后,可以不用再内置span标签了;
下面是本人的一个简单例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>提示框的三角形原理</title> <style type="text/css"> #tips { display: inline-block; position: relative; padding: 0px 15px; border-radius: 5px; border: 1px solid #DDD; } #tips:after, #tips:before { content: ""; position: absolute; left: 10px; bottom: -16px; border: 8px solid transparent; border-top: 8px solid #DDD; } #tips:after { border-top: 8px solid #FFF; bottom: -15px; } </style> </head> <body> <div id="tips"> <p>我是没有人</p> </div> </body> </html>