css实现tip popup

野性酷女 2022-08-02 00:10 103阅读 0赞

<div class="ol-popup" style="width: 300px;height: 200px">
    	<a href="#" class="ol-popup-closer"></a>
    	<div></div>
    </div>

/*popup*/
    .ol-popup {
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      padding: 15px;
      border-radius: 10px; /*圆角*/
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
    }
    /*以下是尖角的实现*/
    .ol-popup:after, .ol-popup:before {
      top: 100%;
      border: solid transparent; /*边框颜色设置为透明*/
      content: " ";
      height: 0; /*高、宽都设置为0，边框的4条边就聚合到一起，组合成一个小正方形。*/
      width: 0; /*正方形按对角线分成4个小三角，分别对应4条边框*/
      position: absolute;
      pointer-events: none;/*不允许穿透层去点击下面的内容*/
    }
    .ol-popup:after {
      /*只保留上面那条边的颜色。由于之前设置了transparent，所以其他边都默认是透明的了。
      又由于4条边都合到了一起，变成4个小三角，所以其实是设置了上面那个三角的颜色，
      其他三角都是透明的。这样，看到的就是一个tip尖角
      */
      border-top-color: red;
      /*可以调整tip尖角的大小*/ 
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }
    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }
    /*以下是关闭按钮*/
    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }
    .ol-popup-closer:after {
      content: "✖";
    }

![20150702173334377][]

[20150702173334377]: /images/20220731/2c11bdaacf3149ab94ccfcef8e42dab1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyui datagrid 的 tip实现

前篇关于easyui datagrid的一些知识在这里可以找到：[http://blog.csdn.net/tiantang\_1986/article/details/409

墨蓝/ 2023年10月16日 22:53/ 0 赞/ 42 阅读

相关前端开发Tip-CSS 实现文本单行或者多行省略

单行省略显示 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 中

╰+攻爆jí腚メ/ 2022年10月16日 12:22/ 0 赞/ 145 阅读

相关 tips提示

1. <!DOCTYPE html> 2. <html lang="zh\_CN"> 3. <head> 4. <meta charset="UTF

比眉伴天荒/ 2022年09月27日 06:17/ 0 赞/ 222 阅读

相关前端tips

行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input se

你的名字/ 2022年08月09日 15:55/ 0 赞/ 204 阅读

相关 css实现tip popup

<div class="ol-popup" style="width: 300px;height: 200px"> <a href="" class="ol-

野性酷女/ 2022年08月02日 00:10/ 0 赞/ 104 阅读

相关 tips

1：CSDN博客，如何添加表格？从Excel中复制表格出来，到[http://pressbin.com/tools/excel\_to\_html\_table/inde

﹏ヽ暗。殇╰゛Y/ 2022年05月25日 03:18/ 0 赞/ 230 阅读

相关 tip

void sync_bssid_for_config(char src_bssid) { char bssid_num[128]={ 0};

ゞ浴缸里的玫瑰/ 2022年05月17日 09:47/ 0 赞/ 247 阅读

相关 Tips

Get wan IP [https://blog.csdn.net/walker0411/article/details/51996052][https_blog.csdn

淩亂°似流年/ 2022年05月10日 09:26/ 0 赞/ 238 阅读

相关 python tips

TCP协议中发送和接收的都是字符串，python中的TCP网络编程也不例外，而且必须有一个变量存储recieve到的东西。 [python字符串与列表的相互转换][py

忘是亡心i/ 2022年04月25日 03:02/ 0 赞/ 264 阅读

相关 react-native-popup-dialog实现通用加载层

2019-01-20 加载层组件效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

迷南。/ 2022年03月25日 10:07/ 0 赞/ 209 阅读