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


    实现后的效果：
  • 相关阅读:
    设计模式-转载
    Java-类和对象基础练习
    Java-单例模式（singleton）-转载
    java-面向对象练习2
    Java-面向对象基础练习
    Java-字符串练习
    Java-数组练习5
    Java-数组练习4
    JAVA-初步认识-常用对象API(String类-常见功能-获取-1)
    JAVA-初步认识-常用对象API(String类-构造函数)
  • 原文地址：https://www.cnblogs.com/lccluyan/p/8335430.html
Copyright © 2020-2023  润新知