经常看到一些非常漂亮的Tip插件，有一个三角指向目标，非常好看。
使用纯边框属性也可以做出这样的效果来。
一切都还要从HTML元素的边框说起。
在HTML中，一个元素可以具有边框（border）、内边距（padding）、外边距（margin）。
当元素的宽度和高度都不为0时，border呈现出一个四方形环绕在内容的四周。但是当元素的高度和宽度都为0时，情况就变得不同了。
因为没有高度和宽度（指内容的高度和宽度），元素的四条边会重叠在一起，如下所示：
假设四条边都是一个矩形，那么4条边描述如下：
left-border：（1，2，3，8）
right-border: (4，5，6，7）
top-border: （1，8，7，6）
bottome-border: （2，3，4，5）
因为(1,8)组成的区域是top-border和left-border的重叠区域，因此它们各占一般，以对角线平分，因此标号为8的三角区域属于top-border，标号为1的三角区域属于left-border。其它区域类似。因此实际上四条边的构成是：
left-border：（1，2）
right-border: (5，6）
top-border: （8，7）
bottome-border: （3，4）
它们都是三角形。如果其它的三边都为透明，那么我们就能得到一个三角形。由于没有使用图片，因此能减少流量，实现也非常简单，推荐大家使用。最后给出第三张图的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用边框属性制作三角形的原理详解</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
position: relative;
padding: 100px;
}
.show {
border-left: 200px solid #BAC36E;
border-right: 200px solid #BAB26E;
border-top: 200px solid #ABB26E;
border-bottom: 200px solid #BAB2E6;
width: 0;
height:0;
}
</style>
</head>
<body>
<div class="show"> </div>
<div style="width:400px;height: 1px;position: absolute; top: 300px;
border-top:1px dashed red;"></div>
<div style="height:400px;width: 1px;position: absolute; left: 300px;top:100px;
border-left:1px dashed red;"></div>
<p style="position: absolute;left:150px;top:200px;">1</p>
<p style="position: absolute;left:150px;top:350px;">2</p>
<p style="position: absolute;left:250px;top:400px;">3</p>
<p style="position: absolute;left:350px;top:400px;">4</p>
<p style="position: absolute;left:425px;top:350px;">5</p>
<p style="position: absolute;left:425px;top:250px;">6</p>
<p style="position: absolute;left:350px;top:150px;">7</p>
<p style="position: absolute;left:200px;top:150px;">8</p>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。