用css伪类实现提示框效果
2014-11-14 21:22
459 查看
题目要求用css实现下图效果:
很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了“那么点东西”,然后设置其边框,形成一黑色三角形,在用after造出另一白色三角形,让白色三角形位置向后移动,正好流出黑色三角形边框:
很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了“那么点东西”,然后设置其边框,形成一黑色三角形,在用after造出另一白色三角形,让白色三角形位置向后移动,正好流出黑色三角形边框:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>testcss</title> <style> #demo{ width: 100px; height:100px; border:2px solid #000; } #demo:before{ content:''; display: block; width: 1px; height:1px; position: relative; top:20px; left:100px; border-left: 20px solid #000; border-top:15px solid transparent; border-bottom:15px solid transparent; } #demo:after{ content:''; display: block; width: 1px; height:1px; position: relative; top:-11px; left:97px; border-left: 20px solid #fff; border-top:15px solid transparent; border-bottom:15px solid transparent; } </style> <script type="text/javascript"> window.onload=function(){ } </script> </head> <body> <div id='demo'></div> </body> </html>
相关文章推荐
- 用css伪类实现提示框效果
- 炫!一组单元素实现的 CSS 加载进度提示效果
- JS+CSS实现另类带提示效果的竖向导航菜单
- 纯CSS实现的帮助提示信息效果
- 纯CSS 实现tooltip 内容提示信息效果
- css伪类 :before和 :after的使用详解 以及实现的一些效果
- div+css实现圆形div以及带箭头提示框效果
- 分享一个CSS,可以实现很棒的提示效果
- CSS实现提示框的效果
- 使用css伪类,实现同类型复选框计数的效果
- 用css伪类实现提示对话框的小三角,哈哈!
- CSS伪类实现中间文字两边横线效果
- JS+CSS实现另类带提示效果的竖向导航菜单
- css伪类before after 实现立体效果
- css实现小窗口提示效果
- css实现图片半透明效果
- CSS实现光滑圆角效果
- 用DIV+CSS如何实现这种表格效果
- 用CSS实现链接的虚线下划线效果
- 用CSS实现链接的虚线下划线效果