影付きの吹き出しを CSS でどう作るか
影付きのボックスに矢印を付けるにはどうしたら良いんだろうか。
ひとまず次のようなものを書いてみた。いつも矢印にボーダーを付けるために使う擬似要素に filter
プロパティを当て、背景をぼかして影を表現してる。
確認したのは Chrome と Safari、 そして Opera 。
<div class="shadow-box"></div>
.shadow-box { position: relative; padding: 10px 20px; width: 200px; height: 200px; border-radius: 4px; background-color: #fff; box-shadow: 0 0 4px 1px rgba(0,0,0, .4); } .shadow-box::before, .shadow-box::after { content: ""; position: absolute; top: 50%; right: -36px; margin-top: -17.9px; display: block; width: 0; height: 0; border: solid transparent; } .shadow-box::before { z-index: 1; overflow: hidden; border-left: solid rgba(0,0,0, .6); border-width: 18px; filter: blur(2px); -webkit-filter: blur(2px); } .shadow-box::after { z-index: 2; border-left: solid #fff; border-width: 18px; }
理由までは調べきれなかったけど、両方の擬似要素に当てている margin-top: -17.9px;
が案外重要。これを負の値だと -18px
以下、正の値だと 36px
以上にすると overflow: hidden
で消してる左の影が表示されてしまう。
どうも個々の数値は擬似要素に指定してる right
プロパティの値と関連があるっぽいんだけど、なぜ margin-top
プロパティと関連があるのかわからない。
IE はこういうのを使えばなんとかなるんだろうけど、特に確認作業は行ってない。
その前に Firefox 35 ( Nightly )でちゃんと表示されてないのを確認して、この問題がまだ解決できてないからだ。
Nightly で確認するとこうなる。矢印左の影が見事に出る:
もともとむちゃな指定で Chrome とかはスタイルを表現していたし、こうなってもしょうがない。
ただ、Can I use でバージョン 35 から Firefox でも filter 要素で表現できる幅が増えたことを確認して、よっしゃいける!と踏んで試してみたのにこの結果は少し残念だ。
影付き吹き出しの実装、何か良い案はないものか... 。