zoukankan      html  css  js  c++  java
  • 纯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.             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.             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.             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.             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.             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.             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-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.            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-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.            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-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.            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-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.            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-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>  


    实现后的效果:

  • 相关阅读:
    python 包管理工具 pip 的配置
    Python 变量作用域 LEGB (下)—— Enclosing function locals
    Python 变量作用域 LEGB (上)—— Local,Global,Builtin
    2020 Java 面试题 小结 (答案慢慢补上,有错误请指出)
    mysql 根据日期(date)做年,月,日分组统计查询
    jvm指令
    正则表达式 分割地址 获取省市区详细地址
    .Net 异常记录
    WCF设计服务协议(一)
    plsql ORA-01789:查询块具有不正确的结果列数
  • 原文地址:https://www.cnblogs.com/lccluyan/p/8335430.html
Copyright © 2011-2022 走看看