Home/ Questions/Q 7030303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:39:10+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0