不一样的山顶角
说到“山顶角”,相信大多数前端人都能够在几秒内想到实现方式、兼容方式。
如果不清楚山顶角的同学,请点这里: 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,谢谢!
原文链接地址:不一样的山顶角