1.三角形的画法

由于div一般是四边形，要画个三角形并不是那么直观，你可以贴一个png,也可以用svg的形式，但是太麻烦。三角形其实可以用CSS画出。可以分两种三角形：

一是纯色的三角形，二十有边框色的三角形

三角形可以 用border画出来，首先一个有四个border的div应该是这样的

然后我们把它的高度和宽度去掉，剩下四个border.如下图：

再把border-top去掉，这样就把上面的区域给裁掉了。

接下来，再让左右两边的border透明，就得到了三角形

这里是用了底部border作为三角形，如果要取左边的border,同理只需要让上下两个border颜色为transparent。

2.实现一个由边缘色的三角形

这种三角形很常见，特别似乎tip的提示框、聊天框等，如下图

首先画一个深色的三角形：

效果如下图：

然后画一个白色的三角形盖上去，错位两个像素，代码如下：

上面用的属性都是css2最基本的属性，所以没有兼容性问题。

添加阴影