消息气泡

来源：互联网发布：angularjs repeat源码编辑：程序博客网时间：2024/04/30 15:40

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ box-shadow: 10px 10px 10px rgba(0,0,0,0.5); } .angle{ width: 0; height:0; border: 20px solid transparent; border-top:20px solid red; margin-top: 30px; } .dialog{ width: 200px; height: 50px; border-radius: 7px; background: orange; position: relative; } .dialog:after{ content: "\200B"; display:block; width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid orange; position: absolute; top: 10px; right: -20px; } .icon{ display: inline-block; width: 38px; height: 43px; background: url("pic1.png") no-repeat -330px -47px; } .icon2{ display: inline-block; width: 38px; height: 43px; background: url("pic1.png") no-repeat -371px -47px; } </style> </head> <body> <img src="http://img1.imgtn.bdimg.com/it/u=2482769153,3919727172&fm=27&gp=0.jpg">  <div class="angle"></div>  <div class="dialog"></div>  <span class="icon"></span> <span class="icon2"></span> </body> </html>

阅读全文

0 0