会话框斜三角css制作

作者:Jasmine - 2015年12月11日
<!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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!