CODEWITHSUNDEEP
css
422
422

Reputation: 5770

need help positioning arrow on div container

I am trying to make a pure css div with arrow ( like speech bubble )

I have created a fiddle here http://jsfiddle.net/ozzy/j9Wku/

Basically, I havent used an image in the fiddle but to the left of the div box when you hover over the image the div animates. You can see effect when you hover over the link.

I want to make it look like a speech bubble, but struggling to accomplish this.

Here is image of what I am after.

enter image description here

Any help greatly appreciated. I only need help doing the arrow for the div.

Upvotes: 0

Views: 669

Answers (3)

422
422

Reputation: 5770

I fiddled with this myself, and came up with a great solution. Code below.

.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;
}

Changed a couple of things in the js and works perfect. Thanks guys

Upvotes: 1

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

ther is an example http://jsfiddle.net/amkrtchyan/j9Wku/7/ i try it with canvas

Upvotes: 0

Bennjamin_
Bennjamin_

Reputation: 99

Easiest way I can think of is using before pseudo class to insert "blank space" before your P tag then style it with borders. 

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/

Upvotes: 1

Related Questions