不一样的山顶角

说到“山顶角”，相信大多数前端人都能够在几秒内想到实现方式、兼容方式。

如果不清楚山顶角的同学，请点这里: https://css-tricks.com/snippets/css/css-triangle/

但是，如果要实现下面这样的带阴影的山顶角，border的实现方式就无能为力了。

上图中的小三角，其阴影和整个弹窗的阴影大小要一样。

实现

方案一 图片

最省力，最直接，但是最不优雅。

方案二 Unicode

使用unicode生成一个三角，然后text-shadow实现阴影

JS Bin on jsbin.com

可以通过 scaleX实现大小，通过text-shadow实现阴影范围。

方案三 Rotate

小矩形定位到需要的位置

然后旋转45度: -webkit-transform: translateY(-15px) rotate(45deg);

缺点就是，兼容浏览器比较麻烦，ie里面还要动用 滤镜。

带阴影的山顶角 on jsbin.com

原创文章，欢迎转载。转载请注明：转载自Fs21 ' s Home，谢谢！
原文链接地址：不一样的山顶角

转载于:https://www.cnblogs.com/freestyle21/p/5116722.html