纯Css气泡箭头殊效，回收css3的说话框结果

发布时间：2018-08-18 12:10:59 所属栏目：访谈来源：站长网

导读：纯Css气泡箭头殊效，回收css3的说话框结果，相同于提醒框的结果，带尖口的导航更具人道化，不外要实现各类赏识器都兼容的代码，还真不是轻易事，在不懈全力下，总算是完成了，只是有些繁琐。这个结果的实现首要用到了transform之中的skew，但愿能为CSS进修

　　纯Css气泡箭头殊效，回收css3的说话框结果，相同于提醒框的结果，带尖口的导航更具人道化，不外要实现各类赏识器都兼容的代码，还真不是轻易事，在不懈全力下，总算是完成了，只是有些繁琐。这个结果的实现首要用到了transform之中的skew，但愿能为CSS进修者提供参考和辅佐。

　　作者：三人行

　　演示：

<!doctype html> <html> <head> <title>回收css3的说话框结果</title> <style> .wrap{position:relative;} .bd{ background:#BDCEEF;width:250px;height:80px;padding:10px;position:relative;z-index:2; box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /* 阴影 */ -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /*filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=145, Strength=3)*/ /* ie的阴影滤镜 */ border-radius: 5px; /* 圆角 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; } .cor{ position:absolute; z-index:2; width:40px; height:40px; background:#BDCEEF; left:30px;bottom:-20px; transform: skewY(-45deg); /* 斜切实现尖角 */ -o-transform: skewY(-45deg); -webkit-transform: skewY(-45deg); -moz-transform: skewY(-45deg); } .cor_s{ z-index:1; box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /* 尖角处的阴影 */ -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); } </style>  </head> <body> <div class='wrap'> <div class='bd'>猛火学院（liehuo.net）提供种种教程、源码、书本教程、网页殊效代码及常用软件下载。</div> <div class="cor"></div> <div class="cor cor_s"></div> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!