纯CSS实现提示框小三角

最新推荐文章于 2022-11-17 19:18:10 发布

jyy_12

最新推荐文章于 2022-11-17 19:18:10 发布

阅读量594

点赞数

分类专栏： CSS 文章标签： css class xhtml div html ie

本文链接：https://blog.csdn.net/jyy_12/article/details/6537289

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

注：IE6不支持边框transparent，当设置成透明时显示为黑色。而当border-style为dotted或dashed时，点线与虚线均以边框宽度为基准，点线长度必须是其宽度的3倍以上（height>=border-width*3），虚线宽长度必须是其宽度的5倍以上（height>=border-width*5），否则点线和虚线都不会出现。最后一种效果即是利用IE6这个特性解决其边框颜色不支持透明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> .box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;} .box .jt{border-width:0 10px 10px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:50px;top:-10px;_top:-12px;} .box2{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border:1px solid #CCCCCC;} .box2 .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;font-family:arial,verdana,sans-serif;} .box2 .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;} .box3{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;} .box3 .jt{border-width:0 0 15px 30px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:-30px;top:25px;} .box4{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;} .box4 div{width:0;height:0;font-size:0;position:absolute;} .box4 .jt{border-width:10px;border-color:#FFF #EEE #EEE #FFF;border-style:solid;left:-20px;top:20px;} .box4 .jt2{border-width:5px 10px ;border-color:transparent #FFF #FFF transparent;border-style:dashed solid solid dashed;left:-20px;top:30px;} </style> </head> <body> <div class="box"> <div class="jt"></div> </div> <div class="box2"> <span class="jt">◆<span class="jt2">◆</span></span> </div> <div class="box3"> <div class="jt"></div> </div> <div class="box4"> <div class="jt"></div> <div class="jt2"></div> </div> </body> </html>