先来理解before和after伪类的用法吧，before从字面上的意思可以理解为前面的意思，它一般和content属性一起使用，把内容插入在其他元素的前面，同理after的含义就是把内容插入到其他元素的后面了。先来看一个简单的demo，如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  div {

    width: 200px;

    height: 100px;

    border: 1px solid red;

  }

  .after:after {

    content: '我是在后面的';

    color: blue;

  }

  .before:before {

    content: '我是在前面的';

    color: red;

  }

</style>

</head>

<body>

  <div class="after">

    我是after内容

  </div>

  <div class="before">

    我是before内容

  </div>

</body>

</html>

效果如下：

简单理解完 before 和 after后，我们来看看如何使用 before 和 after来制作小三角形吧。

1. 首先我们来看看 css border属性，当我们把div中的border-color 设置成不同的颜色后，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  .demo {

    width: 50px;

    height: 50px;

    border-width: 20px;

    border-style: solid;

    border-color: #CCC #00F #933 #0C9;

    margin: 100px;

  }

</style>

</head>

<body>

  <div class="demo"></div>

</body>

</html>

效果如下图：

如果我们现在把div的宽度和高度设置为0的话，那么四边就会变成三角形了，如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  .demo {

    width: 0px;

    height: 0px;

    border-width: 20px;

    border-style: solid;

    border-color: #CCC #00F #933 #0C9;

    margin: 100px;

  }

</style>

</head>

<body>

  <div class="demo"></div>

</body>

</html>

效果变为如下：

应该可以理解掉吧，如上把宽度和高度设置为0的话，中间那个宽50px和高50px变为0，中间那块就没有了。

现在我们需要一个三角形，那么我们现在只需要把其他三边的颜色设置为透明就可以了，将其他三边颜色设置为透明，即color的值为transparent. 如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  .demo {

    width: 0px;

    height: 0px;

    border-width: 20px;

    border-style: solid;

    border-color: transparent transparent #933 transparent;

    margin: 100px;

  }

</style>

</head>

<body>

  <div class="demo"></div>

</body>

</html>

然后效果如下：

现在小三角形可以实现了，当然如果需要不同的方向的三角形可以设置对应不同的 border-color 位置对应的透明。

我们现在需要实现的是使用before和after这样的伪类来实现气泡框类似的效果。先看下一个简单的demo，如下：

<div class="demo"></div>

<style>

  * {margin:0; padding: 0;}

  .demo {

    width: 100px;

    height: 100px;

    position: relative;

    border: 1px solid #09f;

    margin: 100px;

  }

</style>

效果如下：

然后需要把小三角形定位上去即可。利用上面的介绍实现的小三角形的效果放在该元素的伪类上来。
我们需要在该div元素后面加一个小三角形，需要使用到伪类after，然后把伪类上的小三角定位上去即可，如下代码所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  .demo {

    width: 100px;

    height: 100px;

    position: relative;

    border: 1px solid #09f;

    margin: 100px;

  }

  .demo:after {

    width: 0px;

    height: 0px;

    border-width: 12px;

    border-style: solid;

    border-color: transparent transparent #933 transparent;

    position: absolute;

    content: ' ';

    left: 39px;

    top: -24px;

  }

</style>

</head>

<body>

  <div class="demo"></div>

</body>

</html>

如上代码，我们使用了伪元素after，把小三角定位上去，实现的效果变成如下了：

空心三角

现在效果基本实现了气泡框的效果，但是呢上面的小三角是实心的，在很多应用场景中，小三角形是空心的，我们现在需要使用到另外一个伪类元素before。

空心三角的设计思路其实和实心的三角类似，使用的是before伪类，也是把小三角定位上去，但是before伪类设置的小三角可能没有after设置小三角宽度大而已，并且before实现的小三角设置颜色为白色的实心三角，然后两个小三角实现重叠一下，这样的话，从视觉上看到的貌似是空心的三角了。如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css" id="colorFlipFlop">

  * {margin:0; padding: 0;}

  .demo {

    width: 100px;

    height: 100px;

    position: relative;

    border: 1px solid #09f;

    margin: 100px;

  }

  .demo:after, .demo:before {

    width: 0px;

    height: 0px;

    border-width: 12px;

    border-style: solid;

    border-color: transparent transparent #fff transparent;

    position: absolute;

    content: ' ';

    left: 39px;

    top: -24px;

  }

  .demo:before {

    top: -25px;

    border-color: transparent transparent #09f transparent;

  }

</style>

</head>

<body>

  <div class="demo"></div>

</body>

</html>

如下图所示：

理解使用before，after伪类实现小三角形气泡框的更多相关文章

  1. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  2. 利用border和伪类画出三角形 ps：好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  3. CSS伪类选择器实现三角形

    使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...

  4. 关于使用css伪类实现小图标

    效果: .person_use>span{ display:block; width:0; height:0; border-width:10px; border-style:solid; bo ...

  5. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  6. CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

    伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...

  7. 关于css伪类，伪元素详解总结

    伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...

  8. 小tip:CSS计数器+伪类实现数值动态计算与呈现【转】

    [原文]http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/ 一.CSS计数器为 ...

  9. 理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

    理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都 ...

随机推荐

  1. router-view在vue2.0中不显示，解决方法

    学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...

  2. 【代码笔记】Web-JavaScript-javascript while循环

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. 实现加载Tomcat服务器中的图片，并且有进度条提示进度

    首先布局页面, <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...

  4. HDU ACM 1690 Bus System （SPFA）

    Bus System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. 对讲解OS文献的反思

    前天把OS中Taneubaum写的那篇论文Can We Make Operating Systems Reliable and Secure?给班上的同学讲解了一遍.这篇文献我花了三天的时间才把它弄好 ...

  6. Docker 从入门到实践（二）Docker 三个基本概念

    一.Docker 的三个进本概念? 了解 Docker 的三个基本概念,就可以大致了解 Docker 的生命周期. 镜像(Image) 容器(Container) 仓库(Repository) 二.镜 ...

  7. LeetCode算法题-Path Sum（Java实现）

    这是悦乐书的第169次更新,第171篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第28题(顺位题号是112).给定二叉树和整数sum,确定树是否具有根到叶路径,使得沿路 ...

  8. June 14. 2018 Week 24th Thursday

    Good friends, good books, and a sleepy conscience: this is the ideal life. 拥有益友.良书和一颗宁静的内心:这就是理想的生活. ...

  9. March 04th, 2018 Week 10th Sunday

    Tomorrow never comes. 我生待明日,万事成蹉跎. Most of my past failures can be chalked up to the bad habit of pr ...

  10. Spring的通知类型，切入表达式写法

    转载自  https://www.cnblogs.com/ltfxy/p/9882697.html Spring中通知类型: 前置通知:目标方法执行之前进行操作,可以获得切入点信息 后置通知: 目标方 ...