は私がここにフィドル基本的<a href="http://jsfiddle.net/ozzy/j9Wku/" rel="nofollow noreferrer">http://jsfiddle.net/ozzy/j9Wku/</a></p> <p>を作成している</p> <p>（吹き出しのように）矢印で純粋なCSSのdiv要素を作成しようとしています

Question

のdivコンテナのヘルプ測位矢印を必要とする、私は、画像を使用しhaventは画像の上にマウスを置くとdivボックスの左側に表示され、divがアニメーション化されます。リンク上にマウスを移動すると効果が見られます。

私はそれを爆発のように見せたいが、これを達成するのに苦労している。

ここに私が何をしているかのイメージがあります。

すべてのヘルプは大歓迎します。私はdivの矢印をするだけで助けが必要です。

Answer 1

でそれを試してみてください例 http://jsfiddle.net/amkrtchyan/j9Wku/7/ です。以下のコード。

.logo-heading { 
position:absolute; 
font-size:12px; 
margin-left:230px; 
float:left; 
line-height:16px; 
color:#404040; 
background: rgb(255,255,255); 
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); 
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1); 
top:38px; 
padding:5px; 
border-width:1px; 
border-color: #cccccC#F6F6F6 #F6F6F6 #cccccc; 
border-style:solid; 
border-radius:3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
text-shadow: 1px 1px 0 #fff; 
     } 
    .logo-heading2{ 
position:absolute; 
font-size:12px; 
margin-left:230px; 
float:left; 
line-height:16px; 
display:none; 
color:#404040; 
background: rgb(255,255,255); 
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); 
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1); 
top:38px; 
padding:5px; 
border-width:1px; 
border-color: #cccccC#F6F6F6 #F6F6F6 #cccccc; 
border-style:solid; 
border-radius:3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
text-shadow: 1px 1px 0 #fff; 
    } 
#tail1 { 
width: 0px; 
height: 0px; 
border: 10px solid; 
border-color: transparent #f0f0f0 transparent transparent; 
position:absolute; 
top: 14px; 
left: -21px; 
} 

#tail2 { 
width: 0px; 
height: 0px; 
border: 10px solid; 
border-color: transparent #ffffff transparent transparent; 
position:absolute; 
left: -20px; 
top: 14px; 
} 

jsのいくつかの変更があり、完璧に動作します。ありがとうございました

Answer 2

私が考えることができる最も簡単な方法は、Pタグの前に "空白スペース"を挿入して罫線でスタイルする前に擬似クラスを使用することです。

p::before { 
display: block; 
position: absolute; 
top: 18px; 
left: -10px; 
content: ''; 
border-top: 10px solid transparent; 
border-right: 10px solid #eeeeee; 
border-bottom: 10px solid transparent; 
} 

http://jsfiddle.net/j9Wku/6/

Answer 3

THERは、私はこれで自分自身をいじって、素晴らしい解決策を考え出したキャンバス