纯CSS实现无图片带箭头的DIV方框

2013-12-19阅读(6132)评论(0)牵着狗狗看MM

苏州实时公交查询

用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)
这类效果也可以用图片背景来实现,代码会更简洁

CSS代码:

 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代码:

<div class="container">
        <div class="content">
            <br>这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^
        </div>
        <s>
            <i></i>
        </s>
 </div>

效果图:

QQ截图20131219090608
demo演示地址:http://www.w3cways.com/example?pid=973

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 纯CSS实现无图片带箭头的DIV方框
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏