纯CSS实现小三角提示信息_html/css_WEB-ITnose

原创: 2016-06-24 11:52:56 1024浏览

实现后的效果如下：

不带边框的

带边框的

在此提供两种实现方式：

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：

    
    hello，我出生了
    hello，我出生了
    
    hello，我出生了
    hello，我出生了
    
    hello，我出生了
    hello，我出生了
    
    hello，我出生了
    hello，我出生了

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：

    css3气泡框
    css3气泡框
    css3气泡框
    css3气泡框

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

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：