5

次の点を考慮してください。

HTML

<div class="info_bubble">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare ligula et nulla auctor vitae tincidunt erat congue.</p>
</div>

CSS

.info_bubble {
    padding: 0 15px;
    margin: 1em 0 3em;
    border: 5px solid #FFF;
    background: #A6CE39;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0 0 10px #000;
    color: #FFF;
    position: absolute;
    left: 50px;
    top: 50px;
}

.info_bubble::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 10px;
    bottom: auto;
    left: -23px;
    border-width: 15px 23px 15px 0;
    border-color: transparent #FFF;
}

.info_bubble::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 16px;
    bottom: auto;
    left: -15px;
    border-width: 9px 15px 9px 0;
    border-color: transparent #A6CE39;
}​

例: http://jsfiddle.net/ysqQV/2/

上記は、左側から三角形の「矢印」が付いた「吹き出し」を生成します。矢印は、一部が透明で一部が不透明な境界線から作成されます。

吹き出しの後ろにボックス シャドウを使用したいのですが、不透明な部分だけでなく、要素全体から影を落とすため、矢印の周りが少しファンキーになります。

例: http://jsfiddle.net/ysqQV/1/

これは正常な動作であり、エラーではないことはわかっていますが、ボックスの影を矢印の不透明な部分にクリップできるようにしたいと考えています。

コンテンツの高さが異なる可能性があるため、吹き出しに単一の画像を使用することはできません。このソリューションが非常にクリーンであるという理由だけで、複数の画像をつなぎ合わせて使用​​することは避けたいと思います。

実行可能な回避策を考えられる人はいますか?

4

3 に答える 3

3

あなたが求めていることは不可能です。ただし、いくつかの回避策を知っています。

まず、最も簡単な方法として、矢印からドロップ シャドウを外します。それはまだよく見えます。

次に、画像を使用して矢印の影を焼き付けます。理想的ではないかもしれませんが、うまくいきます。

3 番目のオプションは、これらすべてのスタイルを使用して 20 x 20 の正方形を作成し、それを変換して回転させるだけです。ダイヤモンドが得られるので、次のステップは、マスクを使用して不要なエッジを非表示にすることです。私は以前にこれを行ったことがありますが、その過程で間違いなく少しあいまいになるので、実際には最初のオプションを使用することになりました。マスクを使用できない場合は、矢印を div/span などでラップし、オーバーフロー非表示に設定できます。余分なコードですが、同じ結果です。

必要に応じて、最終的なオプションの例を提供できますが、機会が得られるまでは今夜になります。

個人的には、最初のオプションを使用します。

それが役立つことを願っています:)

于 2012-06-18T11:01:34.817 に答える