<title>css Implementing a div box with arrows </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;
compatibility, consider the performance of 6 and previous versions
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>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div class= "Container" >
<div class= "Content" ><br>css implement the border of arrows, I think it's OK ^_^ </div>
<s>
<i></i>
</s>
</div>
<br/>
</body>
CSS Div box with arrows, adaptive height
