51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯css实现聊天小三角特效

时间:2017-08-14 17:03点击:

实现后的效果如下:

不带边框的:

带边框的:


 在此提供两种实现方式:

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>  
        hello,我出生了<br/>  
        hello,我出生了  
    </div>  
    <div class="entry">  
        <div class="entry-trangle-right"><!--本Div只来实现三角形,无其他作用--></div>  
        hello,我出生了<br/>  
        hello,我出生了  
    </div>  
    <div class="entry">  
        <div class="entry-trangle-top"><!--本Div只来实现三角形,无其他作用--></div>  
        hello,我出生了<br/>  
        hello,我出生了  
    </div>  
    <div class="entry">  
        <div class="entry-trangle-bottom"><!--本Div只来实现三角形,无其他作用--></div>  
        hello,我出生了<br/>  
        hello,我出生了  
    </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>  



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

css:



            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>  

实现后的效果如图



51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开