我試圖與需要幫助的定位方向上的div容器
我已經在這裏創造一個小提琴http://jsfiddle.net/ozzy/j9Wku/
基本上箭頭(如語音泡沫)一個純CSS DIV,我還沒有使用的圖像當您將鼠標懸停在div動畫的圖像上時,可以在div框的左側擺弄。將鼠標懸停在鏈接上時可以看到效果。
我想讓它看起來像一個講話泡泡,但努力完成這一點。
這裏是我以後的形象。
任何幫助極大的讚賞。我只需要幫助爲div做箭頭。
我試圖與需要幫助的定位方向上的div容器
我已經在這裏創造一個小提琴http://jsfiddle.net/ozzy/j9Wku/
基本上箭頭(如語音泡沫)一個純CSS DIV,我還沒有使用的圖像當您將鼠標懸停在div動畫的圖像上時,可以在div框的左側擺弄。將鼠標懸停在鏈接上時可以看到效果。
我想讓它看起來像一個講話泡泡,但努力完成這一點。
這裏是我以後的形象。
任何幫助極大的讚賞。我只需要幫助爲div做箭頭。
我這個自己擺弄,並與一個偉大的解決方案上來。下面的代碼。
.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和完美的作品。謝謝你們
我能想到的最簡單的方法是在僞類之前插入「空格」,然後在P標籤之前插入「border space」。
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/amkrtchyan/j9Wku/7/ 我嘗試用帆布
謝謝@Aram我自己設法做到了。 – 422 2012-01-05 23:45:16
謝謝@Bennjamin我設法自己做。 – 422 2012-01-05 23:45:38