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

画出来是介个酱紫的：

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

        .arrow_box {

            position: relative;

            border: 1px solid #c2e1f5;

            padding: 10px;

            width: 200px;

            height: 100px;

            border-radius: 6px;

            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

            margin: 50px;

            float: left;

        }

        .arrow_box:before,

        .arrow_box:after {

            position: absolute;

            display: block;

            width: 0;

            height: 0;

            border: solid transparent;

            pointer-events: none;

            content: "";

            border-color: rgba(136, 183, 213, 0);

        }

        .arrow_box.down:before {

            border-bottom-color: #c2e1f5;

            border-width: 12px;

            left: 49%;

            margin-left: -10px;

            bottom: 100%;

        }

        .arrow_box.down:after {

            border-bottom-color: #fff;

            border-width: 10px;

            left: 50%;

            margin-left: -10px;

            bottom: 100%;

        }

        .arrow_box.up:before {

            border-top-color: #c2e1f5;

            border-width: 12px;

            left: 49%;

            margin-left: -10px;

            top: 100%;

        }

        .arrow_box.up:after {

            border-top-color: #fff;

            border-width: 10px;

            left: 50%;

            margin-left: -10px;

            top: 100%;

        }

        .arrow_box.left:before {

            border-left-color: #c2e1f5;

            border-width: 13px;

            top: 38%;

            left: 100%;

        }

        .arrow_box.left:after {

            border-left-color: #fff;

            border-width: 10px;

            top: 41%;

            left: 100%;

        }

        .arrow_box.right:before {

            border-right-color: #c2e1f5;

            border-width: 13px;

            top: 38%;

            right: 100%;

        }

        .arrow_box.right:after {

            border-right-color: #fff;

            border-width: 10px;

            top: 41%;

            right: 100%;

        }

    </style>

</head>

<body>

    <div class="popovers-body">

        <div class="arrow_box down"></div>

        <div class="arrow_box up"></div>

        <div class="arrow_box left"></div>

        <div class="arrow_box right"></div>

    </div>

</body>

</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. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  3. jquery.Callbacks的实现

    前言 本人是一个热爱前端的菜鸟,一直喜欢学习js原生,对于jq这种js库,比较喜欢理解他的实现,虽然自己能力有限,水平很低,但是勉勉强强也算是能够懂一点吧,对于jq源码解读系列,博客园里有很多,推荐大 ...

  4. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  5. [C#] string 与 String，大 S 与小 S 之间没有什么不可言说的秘密

    string 与 String,大 S 与小 S 之间没有什么不可言说的秘密 目录 小写 string 与大写 String 声明与初始化 string string 的不可变性 正则 string ...

  6. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  7. C#制作简易屏保

    前言:前段时间,有个网友问我C#制作屏保的问题,我瞬间懵逼了(C#还可以制作屏保!).于是我去查阅相关资料,下面把C#如何制作屏保的过程及我学习过程的心得也记录下来,希望对需要的人能有帮助. 基本思路 ...

  8. VS2015在创建项目时的一些注意事项

    一.下面是在创建一个新的项目是我最常用的,现在对他们一一做一个详细的介绍: 1.Win32控制台应用程序我平时编写小的C/C++程序都用它,它应该是用的最多的. 2.名称和解决方案名称的区别:名称是项 ...

  9. 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)

    今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...

  10. 用javascript写星际飞机大战游戏

    在github里看到了个不错的脚本游戏,决定亲自动手来写,效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易,但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 ...