web-dev-qa-db-ja.com

カスタムシェイプの周囲のCSSボックスシャドウ？

こんにちは、

次のようなdivを作成する必要があります。

screenshot

私がこれまでに思いついたのはこれです： 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、...）で動作している場合は、すべて正常です;）

おかげで、

ミク

htmlcsscss-shapes
27
suamikim

ドロップシャドウを使用する：

enter image description here

enter image description here

多分 この記事（box-shadow-vs-filter-drop-shadow） はあなたを助けます

35
Mark

これを行うのはおそらくあなたの最善の利益ではありません。そのままにしておきます。

http://css-tricks.com/triangle-with-shadow/

「ダブルボックスメソッド」にスキップすると、:beforeおよび:after（バブルを作成し終わった）をtransform。本当にこれを行いたい場合は、矢印を左にフロートし、擬似要素に影を適用できます。

6
user1631995

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>

楽しい...

0
Mohammad Fathi MiMFa