纯CSS实现小三角提示信息

标签：css3   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;
        }

<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>

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 ;
        }

<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 ;
        }

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

如有疑问，可联系：

QQ：1004740957

Email：niujp08@qq.com

纯CSS实现小三角提示信息

标签：css3   css   

原文地址：http://blog.csdn.net/gisshixisheng/article/details/41696101