小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS。

画出来是介个酱紫的：

有没有觉得画的萌萌哒，嘻嘻

不贫了，我们一起看代码吧!啦啦啦啦啦啦啦

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <style media="screen">
  8.         .arrow_box {
  9.             position: relative;
  10.             border: 1px solid #c2e1f5;
  11.             padding: 10px;
  12.             width: 200px;
  13.             height: 100px;
  14.             border-radius: 6px;
  15.             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  16.             margin: 50px;
  17.             float: left;
  18.         }
  19.  
  20.         .arrow_box:before,
  21.         .arrow_box:after {
  22.             position: absolute;
  23.             display: block;
  24.             width: 0;
  25.             height: 0;
  26.             border: solid transparent;
  27.             pointer-events: none;
  28.             content: "";
  29.             border-color: rgba(136, 183, 213, 0);
  30.         }
  31.  
  32.         .arrow_box.down:before {
  33.             border-bottom-color: #c2e1f5;
  34.             border-width: 12px;
  35.             left: 49%;
  36.             margin-left: -10px;
  37.             bottom: 100%;
  38.         }
  39.  
  40.         .arrow_box.down:after {
  41.             border-bottom-color: #fff;
  42.             border-width: 10px;
  43.             left: 50%;
  44.             margin-left: -10px;
  45.             bottom: 100%;
  46.         }
  47.  
  48.         .arrow_box.up:before {
  49.             border-top-color: #c2e1f5;
  50.             border-width: 12px;
  51.             left: 49%;
  52.             margin-left: -10px;
  53.             top: 100%;
  54.         }
  55.  
  56.         .arrow_box.up:after {
  57.             border-top-color: #fff;
  58.             border-width: 10px;
  59.             left: 50%;
  60.             margin-left: -10px;
  61.             top: 100%;
  62.         }
  63.  
  64.         .arrow_box.left:before {
  65.             border-left-color: #c2e1f5;
  66.             border-width: 13px;
  67.             top: 38%;
  68.             left: 100%;
  69.         }
  70.  
  71.         .arrow_box.left:after {
  72.             border-left-color: #fff;
  73.             border-width: 10px;
  74.             top: 41%;
  75.             left: 100%;
  76.         }
  77.  
  78.         .arrow_box.right:before {
  79.             border-right-color: #c2e1f5;
  80.             border-width: 13px;
  81.             top: 38%;
  82.             right: 100%;
  83.         }
  84.  
  85.         .arrow_box.right:after {
  86.             border-right-color: #fff;
  87.             border-width: 10px;
  88.             top: 41%;
  89.             right: 100%;
  90.         }
  91.     </style>
  92. </head>
  93.  
  94. <body>
  95.     <div class="popovers-body">
  96.         <div class="arrow_box down"></div>
  97.         <div class="arrow_box up"></div>
  98.         <div class="arrow_box left"></div>
  99.         <div class="arrow_box right"></div>
  100.     </div>
  101. </body>
  102.  
  103. </html>

参考网站：css after before制作的边三角提示框

利用CSS中的:after、: before制作的边三角提示框的更多相关文章

  1. 如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入

    css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...

  2. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  3. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  4. .Net中使用无闪刷新控件时提示框不显示

    今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...

  5. 利用css中的background-position定位图片

    今天遇到一个新鲜的问题,如果定位一个设计师设计的图片.例子如下: 实现只显示每一个图标,主要是将图片等分,然后通过background-position来控制,注意等分的时候要减一,第一个百分比表示x ...

  6. 巧妙利用selenium中的JS操作来处理特殊的文本框

    在使用selenium对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框: 2.检索框:可以直接输入文本,但必须要点击根据输入的 ...

  7. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  8. css中计数器的实现-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485533&idx=1&sn=e88dc5fffa6 ...

  9. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

随机推荐

  1. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. DDD 领域驱动设计－两个实体的碰撞火花

    上一篇:<DDD 领域驱动设计-领域模型中的用户设计?> 开源地址:https://github.com/yuezhongxin/CNBlogs.Apply.Sample(代码已更新) 在 ...

  3. 在Linux系统下运行微信Web开发者工具

    微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux ...

  4. 几个有趣的WEB设备API 前端提高B格必备（一）——电池状态&震动api

    受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分. 1.电池状态API navigator.getBattery():这个api返回的是一个pr ...

  5. html5 与视频

    1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg  (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...

  6. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  7. ASP.NET MVC关于Ajax以及Jquery的无限级联动

    ---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...

  8. 2Sum

    用哈希表(unordered_map)使得时间复杂度从O(n*n)降到O(n),空间复杂度从O(1)增到O(n):一边找一边插入哈希表 注意 在C++11以前要使用unordered_map需要 #i ...

  9. Mysql基础代码（不断完善中）

    Mysql基础代码,不断完善中~ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限 ...

  10. Web开发安全之文件上传安全

    很长一段时间像我这种菜鸡搞一个网站第一时间反应就是找上传,找上传.借此机会把文件上传的安全问题总结一下. 首先看一下DVWA给出的Impossible级别的完整代码: <?php if( iss ...