<p class="sycode"> <br> </p> <br> <title>CSS实现带箭头的DIV方框</title> <br> <style> <br /> s{ <br /> position:absolute; <br /> top:-20px; <br /> *top:-22px; <br /> left:20px; <br /> display:block; <br /> height:0; <br /> width:0; <br /> font-size: 0; <br /> line-height: 0; <br /> border-color:transparent transparent #666 transparent; <br /> border-style:dashed dashed solid dashed; <br /> border-width:10px; <br /> } <br /> div.container{position:absolute; <br /> top:30px; <br /> left:40px; <br /> font-size: 9pt; <br /> display:block; <br /> height:100px; <br /> width:200px; <br /> background-color:transparent; <br /> *border:1px solid #666; <br /> } <br /> i{position:absolute; <br /> top:-9px; <br /> *top:-9px; <br /> left:-10px; <br /> display:block; <br /> height:0; <br /> width:0; <br /> font-size: 0; <br /> line-height: 0; <br /> border-color:transparent transparent #fff transparent; <br /> border-style:dashed dashed solid dashed; <br /> border-width:10px; <br /> } <br /> .content{ <br /> border:1px solid #666; <br /> -moz-border-radius:3px; <br /> -webkit-border-radius:3px; <br /> position:absolute; <br /> background-color:#fff; <br /> width:100%; <br /> height:100%; <br /> padding:5px; <br /> *top:-2px; <br /> *border-top:1px solid #666; <br /> *border-top:1px solid #666; <br /> *border-left:none; <br /> *border-right:none; <br /> *height:102px; <br /> box-shadow: 3px 3px 4px #999; <br /> -moz-box-shadow: 3px 3px 4px #999; <br /> -webkit-box-shadow: 3px 3px 4px #999; <br /> //兼容性，考虑6及之前版本的表现 <br /> filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); <br /> /* For IE 8 */ <br /> -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; <br /> } <br /> </style> <br> <br> <br> <div><a href="http://www.999jiujiu.com/"> http://www.999jiujiu.com/</a></div> <br> <div class="container"> <br> <div class="content"> <br>CSS实现箭头的边框，我觉得还行吧^_^</div> <br> <s> <br> <i></i> <br> </s> <br> </div> <br> <br> <br> <br>
