css小三角提示信息

实现效果如下：

不带边框的效果

带边框的效果

1、不带边框

css:

*{margin:0;padding:0;}  
        body{  
            background:#666;  
            font:14px/20px "Microsoft YaHei";  
            text-align: left;  
        }  
        .entry{  
            position: relative;  
            margin-left: 20px;  
            margin-top:20px;  
            width:200px;  
            background:#fff;  
            padding:10px;  
            /*设置圆角*/  
            -webkit-border-radius:5px;  
            -moz-border-radius:5px;  
            border-radius:5px;  
        }  
        /*左三角*/  
        .entry-trangle-left{  
            position:absolute;  
            bottom:15px;  
            left:-10px;  
            width:0;  
            height:0;  
            border-top:15px solid transparent;  
            border-bottom:15px solid transparent;  
            border-right:15px solid #fff;  
        }  
        /*右三角*/  
        .entry-trangle-right{  
            position:absolute;  
            top:15px;  
            right:-10px;  
            width:0;  
            height:0;  
            border-top:15px solid transparent;  
            border-bottom:15px solid transparent;  
            border-left:15px solid #fff;  
        }  
        /*上三角*/  
        .entry-trangle-top{  
            position:absolute;  
            top:-10px;  
            left:20px;  
            width:0;  
            height:0;  
            border-left:15px solid transparent;  
            border-right:15px solid transparent;  
            border-bottom:15px solid #fff;  
        }  
        /*下三角*/  
        .entry-trangle-bottom{  
            position:absolute;  
            bottom:-10px;  
            left:20px;  
            width:0;  
            height:0;  
            border-left:15px solid transparent;  
            border-right:15px solid transparent;  
            border-top:15px solid #fff;  
        }  

html:

 <div class="entry">  
        <div class="entry-trangle-left"><!--本Div只来实现三角形，无其他作用--></div>  
       回复内容<br/>  
       回复内容
    </div>  
    <div class="entry">  
        <div class="entry-trangle-right"><!--本Div只来实现三角形，无其他作用--></div>  
        回复内容<br/>  
        回复内容
    </div>  
    <div class="entry">  
        <div class="entry-trangle-top"><!--本Div只来实现三角形，无其他作用--></div>  
        回复内容<br/>  
        回复内容 
    </div>  
    <div class="entry">  
        <div class="entry-trangle-bottom"><!--本Div只来实现三角形，无其他作用--></div>  
        回复内容<br/>  
        回复内容
    </div> 

2、带边框的

css:

/*上三角*/  
       .tag-top{  
            margin: 20px;  
            padding: 5px;  
            width:300px;  
            height:60px;  
            border:2px solid #f99;  
            position:relative;  
            background-color:#FFF;  
            /*设置圆角*/  
            -webkit-border-radius:5px;  
            -moz-border-radius:5px;  
            border-radius:5px;  
        }  
       .tag-top:before,.tag-top:after{  
           content:"";  
           display:block;  
           border-width:15px;  
           position:absolute;  
           top:-30px;  
           left:100px;  
           border-style:solid dashed dashed solid;  
           border-color:transparent  transparent #f99 transparent;  
           font-size:0;  
           line-height:0;  
       }  
       .tag-top:after{  
           top:-27px;  
           border-color: transparent transparent #FFF transparent;  
       }  
       /*下三角*/  
       .tag-bottom{  
           margin: 20px;  
           padding: 5px;  
           width:300px;  
           height:60px;  
           border:2px solid #f99;  
           position:relative;  
           background-color:#FFF;  
           /*设置圆角*/  
           -webkit-border-radius:5px;  
           -moz-border-radius:5px;  
           border-radius:5px;  
       }  
       .tag-bottom:before,.tag-bottom:after{  
           content:"";  
           display:block;  
           border-width:15px;  
           position:absolute;  
           bottom:-30px;  
           left:100px;  
           border-style:solid dashed dashed solid;  
           border-color:#f99 transparent  transparent transparent;  
           font-size:0;  
           line-height:0;  
       }  
       .tag-bottom:after{  
           bottom:-27px;  
           border-color: #FFF transparent transparent transparent;  
       }  
       /*左三角*/  
       .tag-left{  
           margin: 20px;  
           padding: 5px;  
           width:300px;  
           height:60px;  
           border:2px solid #f99;  
           position:relative;  
           background-color:#FFF;  
           /*设置圆角*/  
           -webkit-border-radius:5px;  
           -moz-border-radius:5px;  
           border-radius:5px;  
       }  
       .tag-left:before,.tag-left:after{  
           content:"";  
           display:block;  
           border-width:15px;  
           position:absolute;  
           left:-30px;  
           top:20px;  
           border-style:dashed solid solid dashed;  
           border-color:transparent #f99 transparent  transparent;  
           font-size:0;  
           line-height:0;  
       }  
       .tag-left:after{  
           left:-27px;  
           border-color:transparent #FFF transparent transparent ;  
       }  
       .tag-right{  
           margin: 20px;  
           padding: 5px;  
           width:300px;  
           height:60px;  
           border:2px solid #f99;  
           position:relative;  
           background-color:#FFF;  
           /*设置圆角*/  
           -webkit-border-radius:5px;  
           -moz-border-radius:5px;  
           border-radius:5px;  
       }  
       .tag-right:before,.tag-right:after{  
           content:"";  
           display:block;  
           border-width:15px;  
           position:absolute;  
           right:-30px;  
           top:20px;  
           border-style:dashed solid solid dashed;  
           border-color:transparent transparent transparent #f99;  
           font-size:0;  
           line-height:0;  
       }  
       .tag-right:after{  
           right:-27px;  
           border-color:transparent transparent  transparent #FFF ;  
       }  

html:

<div class="tag-top">  
    css3气泡框  
</div>  
<div class="tag-bottom">  
    css3气泡框  
</div>  
<div class="tag-left">  
    css3气泡框  
</div>  
<div class="tag-right">  
    css3气泡框  
</div>