先来理解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. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  2. 腾讯的产品思维 VS 阿里的终局思维

    从成立到借壳上市,有赞用了5年多时间.这期间,它有好几次机会死掉,有很多的理由活不到今天,白鸦曾经说,每一次度过难关最关键都是靠团队的力量.谢天谢地,它活了下来. 那么,这个在To B领域敢打敢拼的团 ...

  3. iphone怎么投屏到电脑屏幕上

    随着苹果手机的更显换代,苹果手机的功能越来越强大,其中iphone手机更新了airplay镜像功能,所以想要手机投屏电脑的小伙伴就更加方便了,但是iphone怎么投屏到电脑呢?大家不用着急,下面即将为 ...

  4. Android Studio--gradle：download 过慢甚至超时timeout报错

    问题描述 今天第一次学习安卓,配置环境花了不少时间其他都比较容易的解决了 gradle 因为会从外国的网站下载东西会非常的慢(具体原理我也不清楚),所以最好让下载地址变成国内的 解决方案(最后有升级方 ...

  5. DAY4(python)打印字符串以及增删改查

    用while循环打印字符串 #if i in s: # print ( i ) s='nanfjkhndaol' index = 0 while 1 : print (s[index]) index+ ...

  6. Oracle EBS when-validate-record 个性化无效果

    在对FORM进行个性化时,针对对应块添加 when-validate-record ,结果做实验的时候无效果. 原因: FORM 中对应的 BLOCK 没有 when-validate-record ...

  7. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  8. python——函数之生成器

    1 生成器函数的含义    生成器是一个返回可以迭代对象的函数,它是一个特殊的迭代器,但迭代器的抽象层级更高且比较复杂需要实现很多方法.相较迭代器而言,生成器简单使用. 2 生成器的创建方式 2.1 ...

  9. LeetCode算法题-Valid Perfect Square（Java实现-四种解法）

    这是悦乐书的第209次更新,第221篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第77题(顺位题号是367).给定正整数num,写一个函数,如果num是一个完美的正方形 ...

  10. C语言 求两数的最大公约数和最小公倍数

    //作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ #include<stdio.h> //最大公约数 int gys(int x,int ...