分享一段代码实例,它实现了气泡对话框效果。
也就是带有小箭头的那种对话框。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> .box { position: relative; width: 150px; height: 80px; border: 1px solid #333; margin: 40px; border-radius: 5px; text-align: center; line-height: 80px; background-color: #FFF5EE; } .antzone { position: absolute; width: 0; height: 0; left: 30px; top: -32px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; } .antzone > div { position: absolute; width: 0; height: 0; left: -15px; top: -14px; border-width: 15px; border-style: solid; border-color: transparent transparent #FFF5EE transparent; } </style> </head> <body> <div class="box "> <div class="antzone"> <div></div> </div> 犀牛前端部落欢迎您 </div> </body> </html>
代码非常的简单,具体实现过程这里就不多介绍了,只是简单提示一下实现原理,如果一个元素的尺寸为0,那么通过边框就可以挤压成三角形效果,然后将其他三个边框设置为透明,就会剩下一个三角形;然后将两个三角形重合起来,通过定位,将一个三角形覆盖在另一个三角形之上,并露出1px的线条,就实现我们的效果。
css气泡对话框代码实例,这样的场景在实际项目中还是用的比较多的,关于css气泡对话框代码实例就介绍到这了。
css气泡对话框代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98627.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: css匹配指定行li元素代码实例
下一篇: AngularJS实现进度条功能示例