css倒三角制作，多用于对话框

 

 这样的对话框经常看见，今天复习js做练习题的时候也遇到了，刚好直接解决这个css的问题。这个三角形看起来很复杂，但是知道怎么做后觉得很简单。

一、制作小三角形的原理：

　　　　利用width、height等于0然后利用边框填充颜色，就可以得到小三角形。下面是分解三角形的最初模型，这样拿到三角形之后只需要设置以下样式就得到了

　

二、设置样式

　　设置好样式让小三角形看起来是连在一起的。下面是一个div很简单的设置，最后用伪类给小三角形装饰一下。

 

然后给这个class用伪类设置，我这里使用的是after

 

 

 

 

 这样就简单的拿到了对话框似的倒三角！！！