こんにちは、
次のようなdivを作成する必要があります。
私がこれまでに思いついたのはこれです: http://jsfiddle.net/suamikim/ft33k/
.bubble {
position: relative;
width: 80px;
height: 160px;
border: 1px solid #33A7F4;
border-radius: 9px;
margin: 100px;
-webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
-moz-box-shadow: 0px 0px 20px 2px #33A7F4;
-ms-box-shadow: 0px 0px 20px 2px #33A7F4;
-o-box-shadow: 0px 0px 20px 2px #33A7F4;
box-shadow: 0px 0px 20px 2px #33A7F4;
}
.bubble:after, .bubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 17px solid transparent;
right: 100%;
}
.bubble-left:before {
border-top-color: #33A7F4;
border-right-color: #33A7F4;
top: 60px;
}
.bubble-left:after {
border-width: 16px;
border-top-color: black;
border-right-color: black;
top: 61px;
}
ご覧のように、「唯一」の問題はバブルの尾の周りのボックスの影(三角形の矢印)です。
また、before-&after-pseudo-classesを使用せず、三角形のみを保持する2番目のdiv(変換、回転など)を使用しようとしましたが、明らかにそれも成功しませんでした。
静止画像は、長方形自体のサイズと尾の位置の両方が動的であり、「実行時」に変化する可能性があるため、オプションではありません。
私はまた、動的に生成されたsvgで境界線と影を作成するソリューションを考え出しました。他のオプションが見つからない場合、私はこのソリューションに固執するつもりですが、それは「ハック」のようにかなり強い感じがします。このソリューションは2つのjavascript-framworks(extjsとraphael)を必要とするため、ここでは投稿していません。この質問はhtmlとcssについてである必要があります。それにもかかわらず、誰かがそれに興味を持っている場合、私はまだそれを提供することができます...
最後に、ブラウザーの互換性はそれほど重要ではありません。大きなバージョンの最新バージョン(firefox、chrome、opera、つまり10、...)で動作している場合は、すべて正常です;)
おかげで、
ミク
ドロップシャドウを使用する:
多分 この記事(box-shadow-vs-filter-drop-shadow) はあなたを助けます
これを行うのはおそらくあなたの最善の利益ではありません。そのままにしておきます。
http://css-tricks.com/triangle-with-shadow/
「ダブルボックスメソッド」にスキップすると、:before
および:after
(バブルを作成し終わった)をtransform
。本当にこれを行いたい場合は、矢印を左にフロートし、擬似要素に影を適用できます。
CSSでfilter
を使用してから、値にdrop-shadow($yourshadow)
関数を設定する必要があります。プロパティとしてfilter: drop-shadow($yourshadow)
関数またはshadow: $yourshadow
に影を書くことに違いはありません。以下のように書くことができます:
.shape1, .shape2{
transform: rotate(35deg);
background: yellow;
height: 100px;
width: 100px;
display: inline-block;
}
.myshape{
margin: 30px;
filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}
<div class="myshape">
<div class="shape1"></div>
<div class="shape2"></div>
</div>
楽しい...