纯CSS箭头提示框
来源:互联网 发布:邓伦 知乎 编辑:程序博客网 时间:2024/05/16 14:25
纯CSS构造出来的三角箭头,很巧妙。
原理很简单,就当元素宽、高为零,且其他边为透明颜色时,哪个边有颜色,那么这个边就形成一个三角。
下面贴出来相应例子。
效果图如下:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{padding:50px} .content{width:200px;min-height:40px;background:#CCFF99;position:relative;padding:10px;margin:20px} /*以下是箭头的css*/ .arrow_top{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent; border-bottom-style:solid;border-bottom-color:#CCFF99;position:absolute;top:-20px;left:15px;} .arrow_left{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent; border-right-style:solid;border-right-color:#CCFF99;position:absolute;top:15px;left:-20px;} .arrow_right{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent; border-left-style:solid;border-left-color:#CCFF99;position:absolute;top:15px;right:-20px;} .arrow_bottom{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:10px solid transparent; border-top-style:solid;border-top-color:#CCFF99;position:absolute;top:100%;left:15px;} /*以下是阴影的css*/ .boxshadow{box-shadow: 2px 2px 4px #999;-moz-box-shadow: 2px 2px 4px #999;-webkit-box-shadow: 2px 2px 4px #999; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div class="content"> <span class="arrow_top"></span> 这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的这是箭头在上面的 </div> <div class="content"> <span class="arrow_bottom"></span> 这是箭头在下面的 </div> <div class="content"> <span class="arrow_left"></span> 这是箭头在左面的 </div> <div class="content"> <span class="arrow_right"></span> 这是箭头在右面的 </div> <div class="content boxshadow"> <span class="arrow_top"></span> 我是加了阴影的提示框 感觉高大上 </div> </body></html>
其中的阴影只是简单的应用了一下,但是效果不错。
{box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}
X轴偏移量 Y轴偏移量都为0 阴影模糊半径>0是四面阴影。
阴影相关知识可参考:
http://blog.csdn.net/freshlover/article/details/7610269
http://www.dabaoku.com/jiaocheng/wangye/css/201107279598.shtml
http://www.jb51.net/css/63281.html
0 0
- 纯CSS箭头提示框
- 纯CSS实现tooltip提示框,CSS箭头及形状
- 纯CSS实现带箭头的提示框效果
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
- 纯CSS箭头,气泡
- 纯CSS箭头,气泡
- 纯CSS实现箭头
- 纯CSS箭头,气泡
- 纯CSS绘制箭头
- 纯CSS箭头
- 纯css实现箭头,上下左右的箭头
- css实现对话框-带箭头提示框
- DIV+CSS制作带箭头提示框
- 纯手工打造css箭头
- 纯css制作三角形箭头
- 纯CSS实现箭头旋转
- 纯css绘制 三角形 ,箭头
- 纯CSS实现的箭头
- 大型网站的HTTPS实践(一)---HTTPS协议和原理
- 多链路及服务器负载均衡原理与设备构建方案
- popwindow 点击空白处不触发下面的控件的解决方案:
- 解决代码逻辑嵌套过多的技巧 do{} while(0);
- emoji表情在web的展示与mysql存储方式
- 纯CSS箭头提示框
- 九宫格手势密码
- C# word,excel,ppt转换成pdf,最终转换成swf
- windows7 64位旗舰版 完美安装64位Oracle11g+32位plsql
- python一键升级所有pip package
- 0.999...=1?
- 大型网站的 HTTPS 实践(二)——HTTPS 对性能的影响
- 郝斌 数据结构和算法分析视频下载 极力推荐
- UINavigationBar下方一像素的黑线解决方法