[JohnWaters]

Hi,

I'm trying to show a div element which has an indication arrow pointing to the left.
I'm using CSS, HTML and Javascript(no framework). I cant seem to sort out the CSS correctly.
Note: I don't want to use any images just pure code.

Any help is much appreciated.

STYLE

#gm_messageBox{
  border-color:#3B5998;
  position:absolute;
  z-index:1
  background-color:#EDEFF4;
  border-style:solid;
  border-width:1px;
  padding:5px;
  padding-left: 20px;
}
#gm_contents{
  z-index:2;
  color:#3B5998;
  font-size:13px;
  font-weight:normal;
  font-family:lucida grande,tahoma,verdana,arial,sans-serif;
}
#css-arrow-left {
 border-color:transparent #3B5998 transparent transparent;
 border-style:solid;
 border-width:5px 10px 5px 0;
 float:left; 
 width:100px padding-top: 10px;
}

HTML

<div>
 <div id="css-arrow-left">
  <div id="gm_messageBox">
   <div id="gm_contents"> TESTING </div>
  </div>
 </div>
</div>

This post has been edited by JohnWaters: 05 November 2010 - 04:43 PM

[Dormilich]

JohnWaters, on 05 November 2010 - 11:33 PM, said:

I'm trying to show a div element which has an indication arrow pointing to the left.

you mean something like ← or ◀?

This post has been edited by Dormilich: 05 November 2010 - 06:38 PM

[drhowarddrfine]

Creating such things with CSS can be cute, even fun, but CSS is not a paint language and using it as such is a waste of time and bandwidth.

[JohnWaters]

Hi, Thanks for the advice, but If you could help me out with the described problem I would appreciate it.

@Dormilich: Thanks I'm looking into using this.

[drhowarddrfine]

No, because I don't want to waste my time on a complete waste of time.

[JohnWaters]

DONE. Thanks Dormilich, I used your suggestion as a workaround which now looks pretty good.

[Dormilich]

well, the only thing I understood was "arrow" …

[Arbitrator]

If you're looking for more arrow characters, I would look up the Unicode character blocks "Arrows", "Supplemental Arrows-A", "Supplemental Arrows-B", and "Dingbats". There are quite a few arrow characters.

Look into the BabelMap program if you want an easy to way search for them (or any other characters).