目标
用css的方式实现如下图样式的提示框
解决方案
考虑以多个部件组装的方式实现。分为矩形提示框和边上的小三角形。
矩形提示框，就是普通的div。自不用说。
问题的关键就是如何画出小三角形。这时应该想到很多方案，比如用一个小图片表示，或者用svg路径表示，再或者用canvas的画图方法实现等等。但是本文讲的是一种非常规方法，完全靠css的方式实现出这个小三角形。
采用css的border属性实现。如果不理解html元素的盒子模型和css的border属性，是几乎不可能想到这种解决方案的。
原理说明
前提
必须首先知道针对html元素的css盒子模型。如下图，html元素的css样式分四层模型，从外到内，依次是margin->border->padding->content。
下面是对一个div元素的css设置
<div><div>
div{
margin: 2px;
border: 2px solid black;
padding: 4px;
width: 10px;
height: 10px;
background: red;
}
该div的显示如下：
该div对应的css盒子模型如下：
通过上图，可见清晰的看到四层模型对应的四个属性以及其参数值。
其中每个属性，均可以单独设置其上、下、左、右四个方向的值。
我们巧妙的设置一下margin,border,padding,width,height的值，就会看到下面一个有趣的现象。
<div></div>
<style>
div{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black red blue yellow;
padding: 0px;
width: 0px;
height: 0px;
}
</style>
从图上可以看出，三角形已经初露端倪了， 接下来只需要把其中一条边颜色保留，其余三条边颜色设置为透明，不就得到一个小三角形了吗。
<div></div>
<style>
div{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
}
</style>
一步一步实现
通过上面的原理说明，用css的border属性巧妙的创造出一个三角形已经不成问题。
下面就是组合问题了。先把矩形div和小三角形组合，逐步实现目标那样的提示框。
一、组合实现提示框外形
<!--组合的提示框组件-->
<div class="tipComponent">
<div class="rectangle">
css实现边上带小三角的提示框
</div>
<div class="triangle"></div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
</style>
通过上图显示，会发现一个明显不和谐的地方，矩形框有边框，小三角没边框。
小三角本身就是用border实现的，也就意味着不能再使用border为其添加边框了。怎么为小三角添加边框呢？
还是组合。我们可以同时实现两个不同颜色的三角形，然后通过叠加，让两者稍微错开一点，不就能显示出边框了吗。
二、组合实现带边框的三角形
<!--组合的提示框组件-->
<div class="tipComponent">
<div class="rectangle">
css实现边上带小三角的提示框
</div>
<div class="triangle">
<div class="triangle_inner"></div>
</div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
.triangle_inner{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
position: absolute;
}
</style>
通过上图发现，两个三角形并没有重合，因为内三角div位于在外三角div的内部，所以其开始绘制的位置是从外部div的内容区域开始绘制的，也就是上图那样。
通过适当的偏移可以解决这个问题，
<!--组合的提示框组件-->
<div class="tipComponent">
<div class="rectangle">
css实现边上带小三角的提示框
</div>
<div class="triangle">
<div class="triangle_inner"></div>
</div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
.triangle_inner{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: -10px;
top:-11px;
position: absolute;
}
</style>
至此，本文开头要实现的目标完成。
元素的position设置为absolute后，其left或top设置的偏移是相对于position不是static的第一个父元素而言的。这是一个知识点
