How do you create this triangle thingy?

Question

enter image description here

How does one create the triangle thing for a container that points to something? Is it photoshop?

It's an image (with css), yes, unless it's a CANVAS drawing. — Jared Farrish, May 28 '11 at 23:28
i don't think there is pure css for this, at least not css2. — Ibu, May 28 '11 at 23:31

grapefrukt · Accepted Answer · 2011-05-29T10:16:50.390

6

It can be done in pure CSS, but an image would be the more sane option.

HTML:

<div id="bubble">
    Yes we can
    <div id="arrow"></div>
    <div id="arrow-border"></div>
</div>

CSS:

#bubble {
    border:2px solid #036;
    font-size:20px;
    padding:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    width:100px;
    position:relative;
}

#arrow {
    border-color: #036 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    height:0px;
    width:0px;
    position:absolute;
    bottom:-40px;
    left:20px;
}

#arrow-border {
    border-color: #fff transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    height:0px;
    width:0px;
    position:absolute;
    bottom:-37px;
    left:20px;
}

edited May 29 '11 at 10:16

answered May 28 '11 at 23:34

grapefrukt

27,016
6
49
73

this is a nice solution and doesn't seem that insane at all – user773804 May 28 '11 at 23:37
Related: [CSS craziness and a new challenge :)](http://stackoverflow.com/q/5623072) – Wesley Murch May 28 '11 at 23:40
the major drawback is that you need to mess with the markup to do it, but, it's still pretty neat. – grapefrukt May 28 '11 at 23:41
The only thing I wish is that the actual solution was part of the answer text. – Jared Farrish May 29 '11 at 04:09
Do I get two more wishes? :P Thanks. – Jared Farrish May 29 '11 at 13:32

score 1 · Answer 2 · answered May 28 '11 at 23:29

If you look here:

http://flowplayer.org/tools/demos/tooltip/index.html

The image that makes the tooltip thingy you're looking at is found here:

http://flowplayer.org/tools/img/tooltip/black_arrow.png

enter image description here

For a CANVAS (non-image) version, see jQuery's BeautyTips:

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

CANVAS is like drawing to the screen. Don't ask me for an example, since I've never used it and I'm not real sure how it works. :P Note, browser support may be an issue with CANVAS.

How do you create this triangle thingy?

2 Answers2