html - カスタムシェイプの周りにCSSボックスの影?

Question

やあ、

次のような 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;
}

ご覧のとおり、「唯一の」問題は、バブルの尾の周りのボックスシャドウ (三角形の矢印) です。

また、前と後の疑似クラスを使用せずに、三角形のみを保持する2番目のdivを使用しようとしました（変換、回転など）が、明らかにそれは私を成功に導きませんでした。

長方形自体のサイズと尾の位置はどちらも動的であり、「実行時」に変化する可能性があるため、静的な画像はオプションではありません。

また、動的に生成された svg を使用して境界線と影を作成するソリューションも考え出しました。他のオプションが見つからない場合は、このソリューションに固執するつもりですが、「ハック」のようにかなり強力に感じます. このソリューションには 2 つの javascript-framworks (extjs と raphael) が含まれており、この質問は html と css に関するものであるため、ここには投稿しません。それにもかかわらず、誰かがそれに興味を持っているなら、私はまだそれを提供することができます...

最後にもう 1 つ: ブラウザの互換性はそれほど重要ではありません。大きなもの（Firefox、Chrome、Opera、つまり10など）の最新バージョンで動作している場合、すべて問題ありません;）

ありがとう、

マイク

score 45 · Accepted Answer

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

ここに画像の説明を入力してください

多分この記事（box-shadow-vs-filter-drop-shadow）はあなたを助けるでしょう

score 6 · Accepted Answer

これを行うことはおそらくあなたの最善の利益ではないでしょう、私はそれをそのままにしておきます。

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

「ダブルボックス方式」までスキップできます。これは、:beforeと:after（すでにバブルの作成に使用済み）を使用してこれを行う非常に手動の方法を示していますtransform。本当にこれを実行したい場合は、矢印を左にフロートさせて、疑似要素を介してシャドウを適用できます。

score 4 · Accepted Answer

filterCSS でfrom を使用してから、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>

楽しみ...

html - カスタムシェイプの周りにCSSボックスの影?

3 に答える 3

Related

Reference