不同的山頂角

說到「山頂角」，相信大多數前端人都可以在幾秒內想到實現方式、兼容方式。

若是不清楚山頂角的同窗，請點這裏: 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，謝謝！
原文連接地址：不同的山頂角