会话框斜三角css制作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a { text-decoration: none; margin: 0; padding: 0; border: 0; } .post { position: relative; } .post .comments-number { position: absolute; left : 15px; top: 20px; padding: 2px 12px; background: #EA4C89; color: #fff; } .post .comments-number:hover { background: #474e5d; } .post .comments-number:after { content: ""; position: absolute; z-index: -1; left: 50%; margin-left: -2px; top: 13px; border: 8px dashed transparent; border-left: 8px solid #EA4C89; border-right-width: 0; } .post .comments-number:hover:after { border-left-color: #474e5d; } </style> </head> <body> <div class="post"> <a class="comments-number" href=""> <span>7</span> </a> </div> </body> </html>
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/336
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!