说到“山顶角”，相信大多数前端人都能够在几秒内想到实现方式、兼容方式。
如果不清楚山顶角的同学，请点这里: https://css-tricks.com/snippets/css/css-triangle/
但是，如果要实现下面这样的带阴影的山顶角，border的实现方式就无能为力了。
上图中的小三角，其阴影和整个弹窗的阴影大小要一样。
实现
方案一 图片
最省力，最直接，但是最不优雅。
方案二 Unicode
使用unicode生成一个三角，然后text-shadow实现阴影
可以通过 scaleX实现大小，通过text-shadow实现阴影范围。
方案三 Rotate
小矩形定位到需要的位置
然后旋转45度: -webkit-transform: translateY(-15px) rotate(45deg);
缺点就是，兼容浏览器比较麻烦，ie里面还要动用 滤镜。
原创文章，欢迎转载。转载请注明：转载自Fs21 ' s Home，谢谢！
原文链接地址：不一样的山顶角
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。