不一样的山顶角

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

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

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

sanjiao1

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

实现

方案一 图片

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

方案二 Unicode

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

JS Bin on jsbin.com


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

方案三 Rotate

小矩形定位到需要的位置

sanjiao3

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

sanjiao4

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

带阴影的山顶角 on jsbin.com

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

posted @ 2016-01-09 16:40  瞿宝明  阅读(222)  评论(0编辑  收藏  举报