目标

用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的第一个父元素而言的。这是一个知识点