Css div box with arrows, adaptive height, cssdiv
<Html>
<Head>
<Title> CSS implementation 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 #666 transparent;
Border-style: 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 # fff transparent;
Border-style: 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, considering the performance of versions 6 and earlier
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> http://www.999jiujiu.com/</div>
<Div class = "container">
<Div class = "content"> <br> CSS implementation arrow border, I think it's okay ^_^ </div>
<S>
<I> </I>
</S>
</Div>
<Br/>
</Body>
</Html>