我们在浏览网页时，经常会发现一些小三角效果
像是下面这样:
这样的效果看起来不仅高大上，而且非常容易实现，我们来尝试一下
实现思路
border属性介绍
我们都知道，一个div在默认的时候是没有边框的，我们可以通过border属性来给div添加边框，具体CSS语法实例如下：
border:1px solid #6e6e6e;
这段代码给div设置了一个1px宽度，颜色为#efefef的实线边框
我们还可以通过具体的border属性来单独更改border的样式，例如：
border-width:1px;
border-style:solid;
border-color:#6e6e6e;
这段代码实现了和上面代码一样的效果，都是给div设置了一个1px宽度，颜色为#efefef的实线边框
效果如下：
我们还可以通过具体的属性分别设置每个边框的样式，例如：
border-color:red green blue pink;
这个语句分别设置了上边框，右边框，下边框，左边框的颜色为红色，绿色，蓝色，粉色
书写的顺序为顺时针
效果如下：
实现三角效果
介绍了这么多border属性，下面我们来实现三角效果
刚才我们的div设置了宽度为200px,高度为100px,如图：
width:200px;
height:100px;
现在我们来试试，如果把div的宽度和高度都设置为0px，再给它加上很粗的像是20px的边框会怎么样呢？
width:0px;
height:0px;
border:20px solid;
border-color:red green blue pink;
效果图
可以看到，我们心心念的三角终于出现了，不过是4个，那么怎么达到我们前文所说的只有一个倒三角的效果呢？
很简单，把另外三个小三角都设置为透明的就好了
border-color:transparent transparent blue transparent;
大功告成！
我们只要改变border-width这个属性也就是边框的宽度，就可以操控小三角的大小，改变border的颜色就可以改变小三角的颜色，再通过别的属性调整好它的位置，就可以实现本文一开始在标题栏上显示小三角的效果了