zoukankan      html  css  js  c++  java
  • 纯css3的上下左右提示框几种方法

    经常用到三角形提示框,用图片吧,大小框不定,所以,css自己写了,可设置宽高比,就可自适应了。

    图形例子如下:

    css代码如下

    <style type="text/css">
          
            /* 基本样式 */
            .tipleft {
              background:#fff;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 8px;
                position: relative;
                width: 200px;
            }
                /**左边**/
                .tipleft:before {
                   position: absolute; 
                    display: inline-block; 
                    border-top: 7px solid transparent; 
                    border-right: 7px solid #eee; 
                    border-bottom: 7px solid transparent; 
                    border-right-color: rgba(0, 0, 0, 0.2); 
                    left: -8px; 
                    top: 20px; 
                    content: ''; 
                }
                /* 背景阴影*/
                .tipleft:after {
                    
                    position: absolute;
                    display: inline-block;
                    border-top: 6px solid transparent;
                    border-right: 6px solid #fff;
                    border-bottom: 6px solid transparent;
                    left: -6px;
                    top: 21px;
                    content: '';
                }
    
    
    
    
                  /**右边**/
                   .tipright{
              background:#fff;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 8px;
                position: relative;
                width: 200px;
            }
              
                .tipright:before {
                   position: absolute; 
                    display: inline-block; 
                    border-top: 7px solid transparent; 
                    border-left: 7px solid #eee; 
                    border-bottom: 7px solid transparent; 
                    border-right-color: rgba(0, 0, 0, 0.2); 
                    right: -8px; 
                    top: 20px; 
                    content: ''; 
                }
                /* 背景阴影*/
                .tipright:after {
                    
                    position: absolute;
                    display: inline-block;
                    border-top: 6px solid transparent;
                    border-left: 6px solid #fff;
                    border-bottom: 6px solid transparent;
                    right: -6px;
                    top: 21px;
                    content: '';
                }
    
    
                  /**上边**/
                   .tiptop{
              background:#fff;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 8px;
                position: relative;
                width: 200px;
            }
              
                .tiptop:before {
                   position: absolute; 
                    display: inline-block; 
                 border-left: 7px solid transparent; 
                border-right: 7px solid transparent; 
                border-top:7px solid #111; 
                    left:18px; 
                    bottom: -7px; 
                    content: ''; 
     
                }
                /* 背景阴影*/
                .tiptop:after {
                    
                    position: absolute;
                    display: inline-block;
                   border-left: 7px solid transparent; 
                    border-right: 7px solid transparent; 
                border-top: 7px solid #fff; 
                   left:18px; 
                    bottom: -7px; 
                    content: '';
                }
    
    
    
                 /**下边**/
                   .tipbottom{
              background:#fff;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 8px;
                position: relative;
                width: 200px;
            }
              
                .tipbottom:before {
                   position: absolute; 
                    display: inline-block; 
                 border-left: 7px solid transparent; 
                border-right: 7px solid transparent; 
                border-bottom:7px solid #111; 
                    left:18px; 
                    top: -7px; 
                    content: ''; 
    
                }
                /* 背景阴影*/
                .tipbottom:after {
                    
                    position: absolute;
                    display: inline-block;
                   border-left: 7px solid transparent; 
                    border-right: 7px solid transparent; 
                border-bottom: 7px solid #fff; 
                   left:18px; 
                    top:-7px; 
                    content: '';
                }
    
            /****第二种方法*/
           #sanjiaotip {
    
    text-indent: 2em;
    
    box-shadow: 0px 0px 10px #999;
    
    padding: 10px;
    
    font-size: 12px;
    
    line-height: 1.5;
    
    border-radius: 5px;
    
    
    
    width: 250px;
    
    position: relative;
    border: 1px solid #CCC;
    margin-left:20px;
    }
    
    #sanjiaotip span {
    
    position: absolute;
    
    left: 25px;
    
    height: 0px;
    
    width: 0px;
    
    }
    
    
    /*右部小三角实现样式开始*/
    
    #sanjiaotip span.right {
    
    background: #FFF;
    
    border-width: 1px;
    
    width: 16px;
    
    height: 16px;
    
    border-color: #CCC #CCC transparent transparent;
    
    border-style: solid solid dashed dashed;
    
    left: 270px;
    
    top: 30px;
    
    border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
    
    line-height: 0;
    
    box-shadow: 5px 0 10px #aaa;
    
    } 
    #sanjiaotip span.left {
    
    background: #FFF;
    
    border-width: 1px;
    
    width: 16px;
    
    height: 16px;
    
    border-color:#CCC  transparent  transparent  #CCC   ;
    
    border-style:solid dashed   dashed solid ;
    
    left:-18px;
    
    top: 30px;
    
    border-radius: 0  0  0 100%;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
    
    line-height: 0;
    
    box-shadow: 0 1px 0 #aaa;
    
    } 
        </style>

    html代码如下:

      <h3>方法一</h3>
    
        <div class="tiptop">
           上面
        </div>
        <br>
        <div class="tipleft">
            左边
        </div>
        <br>
        <div class="tipright">
            右边
        </div>
        <br>
        <div class="tipbottom">
            下面
        </div>
        <br>
        <h3>方法二</h3>
        <div id="sanjiaotip">
            <span class="right"></span><span class="left"></span>
            <p>测试测试测试测试测试测试测试测试测试测试测试测试</p>
        </div>
    

      希望对大家有用。

  • 相关阅读:
    better-scroll 外层可以用positon:fixed 内层只能用position:absolute,不能用positon:fixed
    react中let一些数据是在render里,不是在retrun里
    onClick和ontouchmove一个是pc端一个是移动端,但是还是不知道有什么具体差别
    react中reder->return里: 1.有引号输入内容为'123' 2.没有引号输入内容为<p>123</p>
    if( 1<a<5 )这种写法是错误的,计算机不认识。正确写法是( a>1 && a<5),要不然会有运算法呢
    e.target
    transform: translateY(-50%) 实现元素垂直居中效果
    Uncaught TypeError: Cannot read property 'trim' of undefined
    push()方法返回的是数组新的长度
    transparent是透明的意思,实际上background默认的颜色就是透明的属性
  • 原文地址:https://www.cnblogs.com/dinghouchuanqi/p/5091663.html
Copyright © 2011-2022 走看看