纯CSS实现小三角提示信息

lzugis

发布于 2018-10-23 15:24:14

1.3K0

发布于 2018-10-23 15:24:14

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

实现后的效果如下：

不带边框的

带边框的

在此提供两种实现方式：

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：

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

实现后的效果：

如有疑问，可联系：

QQ：1004740957

Email：niujp08@qq.com

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014年12月03日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

纯CSS实现小三角提示信息

纯CSS实现小三角提示信息

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐