zoukankan      html  css  js  c++  java
  • 纯css三角提示框,兼容IE8

    利用border属性实现

     .messageBox{
               position: relative;
               width: 240px;
               height: 60px;
               line-height: 60px;
               background: #e9fbe4;
               border: 1px solid #c9e9c0;
               border-radius: 4px;
               text-align: center;
               color: #0c7823;
           }
            .triangleBorder{
                position: absolute;
                left: 30px;
                overflow: hidden;
                width: 0;
                height: 0;border-width: 10px;border-style: solid dashed dashed dashed;
            }
            .tbBorder{
                bottom: -20px;
                border-color: #c9e9c0 transparent transparent transparent;
            }
            .tbBackground{
                bottom: -19px;border-color: #e9fbe4 transparent transparent transparent;
            }
    <div class="messageBox">
        <span>我是利用border属性实现的</span>
        <div class="triangleBorder tbBorder"></div>
        <div class="triangleBorder tbBackground"></div>
    </div>

    第2种:利用“♦”字符实现(谷歌浏览器显示不正常)

     
       IE 火狐  谷歌
    .messageBox{
               position: relative;
               width: 240px;
               height: 60px;
               line-height: 60px;
               background: #e9fbe4;
               box-shadow: 1px 2px 3px #e9f4e4;
               border: 1px solid #c9e9c0;
               border-radius: 4px;
               text-align: center;
               color: #0c7823;
           }
            .triangleBorder{
                position: absolute;
                left: 30px;
                overflow: hidden;
                width: 26px;
                height: 26px;
                font: normal 26px "SimSun";
            }
            .tbBorder{
                bottom: -12px;
                color: #c9e9c0;
            }
            .tbBackground{
                bottom: -11px;color: #e9fbe4;
            }
    <div class="messageBox">
        <span>我是利用♦字符实现的</span>
        <div class="triangleBorder tbBorder"></div>
        <div class="triangleBorder tbBackground"></div>
    </div>

     第3种

    .triangle {
                position: relative;
                width: 100px;
                height: 50px;
                border: 2px solid #4ed621;
                border-radius: 5px;
            }
    
            .triangle:before {
                position: absolute;
                content: "";
                top: -10px;
                left: 25px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #4ed621;
            }
            /* 白色覆盖*/
            .triangle:after {
                position: absolute;
                content: "";
                /*减少两像素*/
                top: -8px;
                left: 25px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #fff;
            }
    <div class="triangle"></div>

     第4种

     .box{
                position: relative;
                padding-top: 8px;
            }
            .con{
                width: 200px;
                height: 100px;
                border: 1px skyblue solid;
                border-radius: 3px;
                background-color: skyblue;
            }
            .con-ret {
                border: 7px solid transparent;
                border-bottom-color: skyblue;
                position: absolute;
                left: 10px;
                top: -6px;
    
            }
    <div class="box">
        <div class="con-ret"></div>
        <div class="con"></div>
    </div>

     第5种

    .main{
                width: 120px;
                padding: 10px;
                font-size: 14px;
                color: #333;
                line-height: 28px;
                background: #F0981C;
                border: 2px solid #FF0000;
                position: relative;
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius: 5px;
                display: inline-block;
            }
            
            .main:before,.main:after{
                content: ' ';
                border-top: 12px solid #FF0000;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                position: absolute;
                bottom: -12px;
                left: 20px;
            }
            .main:after{
                border-top: 12px solid #F0981C;
                bottom: -9px;
            }
    <div class="main">
        <p>这是内容这是内容这是内容</p>
    </div>
  • 相关阅读:
    oracle的分析函数over 及开窗函数
    ASP.NET中分布式事务的使用
    后台实现显示欢迎用户登陆的方法
    AjaxHelper的get和post请求的封装类
    登陆权限验证Session和Cookie用法及BasePage类使用
    四个常用.NET的SqlHelper的方法
    ASP.NET在实际开发中验证码的用法
    SQL Server事务的存储过程
    利用JQuery实现全选和反选的几种方法
    JS中表格的全选和删除要注意的问题
  • 原文地址:https://www.cnblogs.com/coldfishdt/p/10357649.html
Copyright © 2011-2022 走看看