您的位置：首页 > Web前端 > CSS

CSS带箭头的DIV方框，自适应高度

2015-06-16 13:25 761 查看

<html>

<head>

<title>CSS实现带箭头的DIV方框</title>

<style>

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;

}

div.container{position:absolute;

top:30px;

left:40px;

font-size: 9pt;

display:block;

height:100px;

width:200px;

background-color:transparent;

*border:1px solid #666;

}

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;

//兼容性，考虑6及之前版本的表现

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')";

}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="container">

<div class="content"><br>CSS实现箭头的边框，我觉得还行吧^_^</div>

<s>

<i></i>

</s>

</div>

<br />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航