1

CSS で小さな三角形 (長方形のチャット バブルの尾として) を描画しようとしていました。なんとかできましたが、尻尾とボックスにボックス シャドウを適用したいと思いました。したがって、テールには次の CSS があります。

#bubble::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -22px;
    left: 10px;
    border-width: 22px 0 0 20px;
    border-style: solid;
    border-color: #fff transparent;
    -webkit-box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);
    box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);
}

これをレンダリングするもの (ごめん; ズームのため背景が少しぼやけています):

Chrome でレンダリングされた尾

泡の尾の対角線部分に沿ってボックス シャドウがレンダリングされないことに注意してください。

私が達成したい望ましい効果は次のとおりです。

ここに画像の説明を入力

これは Photoshop 内のスクリーンショットなので、ブラウザーのポートビューの部分的なスクリーンショットとは少し異なるように見えるかもしれません (影が大きくなっているはずです。パスのスケーリング後にレイヤー スタイルを更新するのを忘れていました)。

どうすればそれを達成できますか？

ありがとう！

PS: ラスター イメージまたは SVG を使用するという考えにはオープンです。

4

2 に答える 2

1

あなたがやろうとしていることは、SAに関するこの以前の投稿に関連していると思います: CSS描画矢印のCSSドロップシャドウ

于 2012-07-23T15:42:13.817 に答える
0

CSSだけでは無理だと思います。box-shadow要素のボックスに適用され、画像はまだ長方形です:)

http://lineandpixel.com/blog/png-shadowを参照して、不満を抱いている別のユーザーからの書き込みを確認してください。

弾丸を噛んで、ラスター画像または SVG を使用する必要があります。

于 2012-07-23T14:20:51.283 に答える