2019-03-09 带边框的三角形提示框

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>  

此外，如若，设置边框的颜色与背景色相同，也能得到没有边框的：
css：

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

html

<div class="tag-right-noborder">  
    css3气泡框  
</div>