html div边框左上角,纯CSS实现边上带小三角的div提示框

目标

用css的方式实现如下图样式的提示框

解决方案

考虑以多个部件组装的方式实现。分为矩形提示框和边上的小三角形。

矩形提示框，就是普通的div。自不用说。

问题的关键就是如何画出小三角形。这时应该想到很多方案，比如用一个小图片表示，或者用svg路径表示，再或者用canvas的画图方法实现等等。但是本文讲的是一种非常规方法，完全靠css的方式实现出这个小三角形。

采用css的border属性实现。如果不理解html元素的盒子模型和css的border属性，是几乎不可能想到这种解决方案的。

原理说明

前提

必须首先知道针对html元素的css盒子模型。如下图，html元素的css样式分四层模型，从外到内，依次是margin->border->padding->content。

下面是对一个div元素的css设置

div{

margin: 2px;

border: 2px solid black;

padding: 4px;

width: 10px;

height: 10px;

background: red;

}

该div的显示如下：

该div对应的css盒子模型如下：

通过上图，可见清晰的看到四层模型对应的四个属性以及其参数值。

其中每个属性，均可以单独设置其上、下、左、右四个方向的值。

我们巧妙的设置一下margin,border,padding,width,height的值，就会看到下面一个有趣的现象。

div{

margin: 0px;

border-width: 10px;

border-style: solid;

border-color: black red blue yellow;

padding: 0px;

width: 0px;

height: 0px;

}

从图上可以看出，三角形已经初露端倪了， 接下来只需要把其中一条边颜色保留，其余三条边颜色设置为透明，不就得到一个小三角形了吗。

div{

margin: 0px;

border-width: 10px;

border-style: solid;

border-color: black transparent transparent;

padding: 0px;

width: 0px;

height: 0px;

}

一步一步实现

通过上面的原理说明，用css的border属性巧妙的创造出一个三角形已经不成问题。

下面就是组合问题了。先把矩形div和小三角形组合，逐步实现目标那样的提示框。

一、组合实现提示框外形

css实现边上带小三角的提示框

.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;

}

通过上图显示，会发现一个明显不和谐的地方，矩形框有边框，小三角没边框。

小三角本身就是用border实现的，也就意味着不能再使用border为其添加边框了。怎么为小三角添加边框呢？

还是组合。我们可以同时实现两个不同颜色的三角形，然后通过叠加，让两者稍微错开一点，不就能显示出边框了吗。

二、组合实现带边框的三角形

css实现边上带小三角的提示框

.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;

}

通过上图发现，两个三角形并没有重合，因为内三角div位于在外三角div的内部，所以其开始绘制的位置是从外部div的内容区域开始绘制的，也就是上图那样。

通过适当的偏移可以解决这个问题，

css实现边上带小三角的提示框

.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;

}

至此，本文开头要实现的目标完成。

元素的position设置为absolute后，其left或top设置的偏移是相对于position不是static的第一个父元素而言的。这是一个知识点