你怎么创造这个三角形的东西？

Question

如何为指向某个东西的容器创建三角形的东西？是photoshop吗？

Answer 1

它可以be done in pure CSS，但图像将是更合理的选择。

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

Answer 2

如果你看这里：

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

可以在这里找到使您正在查看工具提示的图像：

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

对于CANVAS（非图像）版本，请参阅jQuery的BeautyTips：

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

CANVAS就像画画一样。不要问我一个例子，因为我从来没有使用它，我不确定它是如何工作的。 ：P注意，浏览器支持可能是CANVAS的一个问题。