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>
  • 相关阅读:
    hdoj2187:悼念512汶川大地震遇难同胞 (贪心)
    2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性
    2.0外观之样式, 模板, 视觉状态和视觉状态管理器
    2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle
    2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton
    2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush
    2.0图形之基类System.Windows.Shapes.Shape
    2.0交互之鼠标事件和键盘事件
    2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton
    2.0交互之InkPresenter(涂鸦板)
  • 原文地址:https://www.cnblogs.com/coldfishdt/p/10357649.html
Copyright © 2011-2022 走看看