次の点を考慮してください。
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/
これは正常な動作であり、エラーではないことはわかっていますが、ボックスの影を矢印の不透明な部分にクリップできるようにしたいと考えています。
コンテンツの高さが異なる可能性があるため、吹き出しに単一の画像を使用することはできません。このソリューションが非常にクリーンであるという理由だけで、複数の画像をつなぎ合わせて使用することは避けたいと思います。
実行可能な回避策を考えられる人はいますか?