CSS三角箭头应用实践_Div+Css教程--HTML5中文学习网

　　用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)

　　这类效果也可以用图片背景来实现，代码会更简洁

　　CSS代码：

　　CSS Code复制内容到剪贴板

　　div.container{position:absolute;

　　top:30px;

　　left:40px;

　　font-size: 9pt;

　　display:block;

　　height:100px;

　　width:200px;

　　background-color:transparent;

　　*border:1px solid #666;

　　}

　　position:absolute;

　　top:-20px;

　　*top:-22px;

　　left:20px;

　　display:block;

　　height:0;

　　width:0;

　　font-size: 0;

　　line-height: 0;

　　border-color:transparent transparent #666 transparent;

　　border-style:dashed dashed solid dashed;

　　border-width:10px;

　　}

　　i{position:absolute;

　　top:-9px;

　　*top:-9px;

　　left:-10px;

　　display:block;

　　height:0;

　　width:0;

　　font-size: 0;

　　line-height: 0;

　　border-color:transparent transparent #fff transparent;

　　border-style:dashed dashed solid dashed;

　　border-width:10px;

　　}

　　.content{

　　border:1px solid #666;

　　-moz-border-radius:3px;

　　-webkit-border-radius:3px;

　　position:absolute;

　　background-color:#fff;

　　width:100%;

　　height:100%;

　　padding:5px;

　　*top:-2px;

　　*border-top:1px solid #666;

　　*border-left:none;

　　*border-right:none;

　　*height:102px;

　　box-shadow: 3px 3px 4px #999;

　　-moz-box-shadow: 3px 3px 4px #999;

　　-webkit-box-shadow: 3px 3px 4px #999;

　　/* For IE 5.5 - 7 */

　　filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');

　　/* For IE 8 */

　　-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";

　　}

　　HTML代码：

　　XML/HTML Code复制内容到剪贴板

　　
这是框中的文字，可动态显示。高度自动增加，应该不错吧^_^

　　效果图：

　　这次介绍下CSS制作三角箭头

　　通常，我们做上图那个三角形，一般都是做张图，而且需要两张，因为一般都是下拉菜单的效果，需要有个hover的样式，箭头是反的。那是不是有更好的办法呢，毕竟要用两张图片来解决这么一个小问题太浪费资源了，于是，下面我要用纯CSS的方法来解决这一问题，用到的只需css的一个属性，就是border-width

　　我们先来看个样式，如果设置元素边框，会怎么样：