欢迎大家在这里学习CSS三角箭头应用实践!这里是我们给大家整理出来的精彩内容。我相信，这些问题也肯定是很多朋友在关心的，所以我就给大家谈谈这个!

用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;

}

s{

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-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三角箭头应用实践内容就给大家介绍到这里了。希望大家继续关注我们的网站!

相关推荐：

CSS中的层分离编程的方法