• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
壮哉我大狮子
博客园    首页    新随笔    联系   管理    订阅  订阅

纯CSS实现小三角提示信息

实现后的效果如下：

不带边框的

带边框的

在此提供两种实现方式：

1、不带边框的

css：

 
 
  1. *{margin:0;padding:0;}  
  2.         body{  
  3.             background:#666;  
  4.             font:14px/20px "Microsoft YaHei";  
  5.             text-align: left;  
  6.         }  
  7.         .entry{  
  8.             position: relative;  
  9.             margin-left: 20px;  
  10.             margin-top:20px;  
  11.             width:200px;  
  12.             background:#fff;  
  13.             padding:10px;  
  14.             /*设置圆角*/  
  15.             -webkit-border-radius:5px;  
  16.             -moz-border-radius:5px;  
  17.             border-radius:5px;  
  18.         }  
  19.         /*左三角*/  
  20.         .entry-trangle-left{  
  21.             position:absolute;  
  22.             bottom:15px;  
  23.             left:-10px;  
  24.             width:0;  
  25.             height:0;  
  26.             border-top:15px solid transparent;  
  27.             border-bottom:15px solid transparent;  
  28.             border-right:15px solid #fff;  
  29.         }  
  30.         /*右三角*/  
  31.         .entry-trangle-right{  
  32.             position:absolute;  
  33.             top:15px;  
  34.             right:-10px;  
  35.             width:0;  
  36.             height:0;  
  37.             border-top:15px solid transparent;  
  38.             border-bottom:15px solid transparent;  
  39.             border-left:15px solid #fff;  
  40.         }  
  41.         /*上三角*/  
  42.         .entry-trangle-top{  
  43.             position:absolute;  
  44.             top:-10px;  
  45.             left:20px;  
  46.             width:0;  
  47.             height:0;  
  48.             border-left:15px solid transparent;  
  49.             border-right:15px solid transparent;  
  50.             border-bottom:15px solid #fff;  
  51.         }  
  52.         /*下三角*/  
  53.         .entry-trangle-bottom{  
  54.             position:absolute;  
  55.             bottom:-10px;  
  56.             left:20px;  
  57.             width:0;  
  58.             height:0;  
  59.             border-left:15px solid transparent;  
  60.             border-right:15px solid transparent;  
  61.             border-top:15px solid #fff;  
  62.         }  


html：

 
 
  1. <div class="entry">  
  2.     <div class="entry-trangle-left"><!--本Div只来实现三角形，无其他作用--></div>  
  3.     hello，我出生了<br/>  
  4.     hello，我出生了  
  5. </div>  
  6. <div class="entry">  
  7.     <div class="entry-trangle-right"><!--本Div只来实现三角形，无其他作用--></div>  
  8.     hello，我出生了<br/>  
  9.     hello，我出生了  
  10. </div>  
  11. <div class="entry">  
  12.     <div class="entry-trangle-top"><!--本Div只来实现三角形，无其他作用--></div>  
  13.     hello，我出生了<br/>  
  14.     hello，我出生了  
  15. </div>  
  16. <div class="entry">  
  17.     <div class="entry-trangle-bottom"><!--本Div只来实现三角形，无其他作用--></div>  
  18.     hello，我出生了<br/>  
  19.     hello，我出生了  
  20. </div>  


2、带边框的

css：

 

 
  1. /*上三角*/  
  2.        .tag-top{  
  3.             margin: 20px;  
  4.             padding: 5px;  
  5.             width:300px;  
  6.             height:60px;  
  7.             border:2px solid #f99;  
  8.             position:relative;  
  9.             background-color:#FFF;  
  10.             /*设置圆角*/  
  11.             -webkit-border-radius:5px;  
  12.             -moz-border-radius:5px;  
  13.             border-radius:5px;  
  14.         }  
  15.        .tag-top:before,.tag-top:after{  
  16.            content:"";  
  17.            display:block;  
  18.            border-width:15px;  
  19.            position:absolute;  
  20.            top:-30px;  
  21.            left:100px;  
  22.            border-style:solid dashed dashed solid;  
  23.            border-color:transparent  transparent #f99 transparent;  
  24.            font-size:0;  
  25.            line-height:0;  
  26.        }  
  27.        .tag-top:after{  
  28.            top:-27px;  
  29.            border-color: transparent transparent #FFF transparent;  
  30.        }  
  31.        /*下三角*/  
  32.        .tag-bottom{  
  33.            margin: 20px;  
  34.            padding: 5px;  
  35.            width:300px;  
  36.            height:60px;  
  37.            border:2px solid #f99;  
  38.            position:relative;  
  39.            background-color:#FFF;  
  40.            /*设置圆角*/  
  41.            -webkit-border-radius:5px;  
  42.            -moz-border-radius:5px;  
  43.            border-radius:5px;  
  44.        }  
  45.        .tag-bottom:before,.tag-bottom:after{  
  46.            content:"";  
  47.            display:block;  
  48.            border-width:15px;  
  49.            position:absolute;  
  50.            bottom:-30px;  
  51.            left:100px;  
  52.            border-style:solid dashed dashed solid;  
  53.            border-color:#f99 transparent  transparent transparent;  
  54.            font-size:0;  
  55.            line-height:0;  
  56.        }  
  57.        .tag-bottom:after{  
  58.            bottom:-27px;  
  59.            border-color: #FFF transparent transparent transparent;  
  60.        }  
  61.        /*左三角*/  
  62.        .tag-left{  
  63.            margin: 20px;  
  64.            padding: 5px;  
  65.            width:300px;  
  66.            height:60px;  
  67.            border:2px solid #f99;  
  68.            position:relative;  
  69.            background-color:#FFF;  
  70.            /*设置圆角*/  
  71.            -webkit-border-radius:5px;  
  72.            -moz-border-radius:5px;  
  73.            border-radius:5px;  
  74.        }  
  75.        .tag-left:before,.tag-left:after{  
  76.            content:"";  
  77.            display:block;  
  78.            border-width:15px;  
  79.            position:absolute;  
  80.            left:-30px;  
  81.            top:20px;  
  82.            border-style:dashed solid solid dashed;  
  83.            border-color:transparent #f99 transparent  transparent;  
  84.            font-size:0;  
  85.            line-height:0;  
  86.        }  
  87.        .tag-left:after{  
  88.            left:-27px;  
  89.            border-color:transparent #FFF transparent transparent ;  
  90.        }  
  91.        .tag-right{  
  92.            margin: 20px;  
  93.            padding: 5px;  
  94.            width:300px;  
  95.            height:60px;  
  96.            border:2px solid #f99;  
  97.            position:relative;  
  98.            background-color:#FFF;  
  99.            /*设置圆角*/  
  100.            -webkit-border-radius:5px;  
  101.            -moz-border-radius:5px;  
  102.            border-radius:5px;  
  103.        }  
  104.        .tag-right:before,.tag-right:after{  
  105.            content:"";  
  106.            display:block;  
  107.            border-width:15px;  
  108.            position:absolute;  
  109.            right:-30px;  
  110.            top:20px;  
  111.            border-style:dashed solid solid dashed;  
  112.            border-color:transparent transparent transparent #f99;  
  113.            font-size:0;  
  114.            line-height:0;  
  115.        }  
  116.        .tag-right:after{  
  117.            right:-27px;  
  118.            border-color:transparent transparent  transparent #FFF ;  
  119.        }  

html：

 
 
  1. <div class="tag-top">  
  2.     css3气泡框  
  3. </div>  
  4. <div class="tag-bottom">  
  5.     css3气泡框  
  6. </div>  
  7. <div class="tag-left">  
  8.     css3气泡框  
  9. </div>  
  10. <div class="tag-right">  
  11.     css3气泡框  
  12. </div>  

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

css：

 
 
  1. .tag-right-noborder{  
  2.            margin: 20px;  
  3.            padding: 5px;  
  4.            width:300px;  
  5.            height:60px;  
  6.            border:2px solid #FFF;  
  7.            position:relative;  
  8.            background-color:#FFF;  
  9.            /*设置圆角*/  
  10.            -webkit-border-radius:5px;  
  11.            -moz-border-radius:5px;  
  12.            border-radius:5px;  
  13.        }  
  14.        .tag-right-noborder:before,.tag-right-noborder:after{  
  15.            content:"";  
  16.            display:block;  
  17.            border-width:15px;  
  18.            position:absolute;  
  19.            right:-30px;  
  20.            top:20px;  
  21.            border-style:dashed solid solid dashed;  
  22.            border-color:transparent transparent transparent #FFF;  
  23.            font-size:0;  
  24.            line-height:0;  
  25.        }  
  26.        .tag-right-noborder:after{  
  27.            right:-27px;  
  28.            border-color:transparent transparent  transparent #FFF ;  
  29.        }  


html：

 
 
  1. <div class="tag-right-noborder">  
  2.     css3气泡框  
  3. </div>  


实现后的效果：

posted @ 2018-01-23 13:59  壮哉我大狮子  阅读(1508)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3