div带箭头提示框实例

来源:转载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div带箭头提示框实例</title> <style type="text/css"> .info { margin-top: 50px; position:relative; width:200px; height:50px; line-height:50px; background:#F6F1B3; box-shadow:1px 2px 3px #E9D985; border:1px solid #DACE7C; border-radius:4px; text-align:center; color:red; } .nav { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed; } .nav-border { top:-20px; border-color:transparent transparent #DACE7C transparent; } .nav-background { top:-19px; border-color:transparent transparent #F6F1B3 transparent; } .nav2 { position:absolute; top:-8px; left:30px; overflow:hidden; width:13px; height:13px; background:#F6F1B3; border-left:1px solid #DACE7C; border-top:1px solid #DACE7C; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .nav3 { position:absolute; left:30px; overflow:hidden; width:24px; height:24px; font:normal 24px "微软雅黑"; } .nav-border3 { top:-17px; color:#DACE7C; } .nav-background3 { top:-16px; color:#F6F1B3; } </style></head> <body><div class="info"> <span>通过border</span> <div class="nav nav-border"></div> <div class="nav nav-background"></div></div><div class="info"> <span>通过transform</span> <div class="nav2"></div></div><div class="info"> <span>通过♦</span> <div class="nav3 nav-border3">♦</div> <div class="nav3 nav-background3">♦</div></div></body> </html> 


分享给朋友:
您可能感兴趣的文章:
随机阅读: