参考网址：http://www.cnblogs.com/daxiong/articles/3158630.html
1)根据博主的操作可以很书实现这个操作，操作过程中主要是利用了chrome devtools来实现定位的；
2）相关知识的补充：
定位（position之常规使用）
- position的属性值有static, fixed, relative, absolute，主要注意这四个的参照对象;
- static是默认设置，遵行基本的定位规定，是文档流中的一部分。
- fixed的参照对象是可视窗口而非父级元素，可通过z-index 进行层次分级。（比如可用于实现一个随窗口移动而移动的导航栏
- relative 设定元素，其参照主要是其原先的位置，根据top, rigth, bottom, left 这四个位置元素进行调节；relative设定的元素仍属于文档流的一部分，而且占据了其原来的空间。
- absolute其参照是浏览器左上角，这种设置的元素已经脱离了文档流，不占据空间，可以使用z-index进行层次分组。
- 关联：如果父容器使用相对定位，而子元素使用了绝对定位，那么子元素的位置参照就是父窗口左上角，而不是浏览器左上角了。fixed与absolute很相似，但absolute是被固定在网页中的某个位置，而fixed是被固定于浏览器中的某个位置。
- position需要配合top, right, bottom, left使用，这四个值可以为正数，也可以是负数，负数一般可以用于将元素拖出其父元素范围或是浏览器视角
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <div class="mytag"> </div> </html> /*index.css> .mytag { 200px; height: 30px; background-color: #288; border: 5px solid #09F; position:relative; } .mytag::before { content: ""; display: block; position: absolute; bottom: -25px; left: 50px; border: 10px solid #09F; border-color:#09F transparent transparent transparent; } .mytag::after { content: ""; display: block; position: absolute; bottom: -18px; left: 50px; border: 10px solid #09F; border-color:#288 transparent transparent transparent }