你如何创建这个三角形的东西？答案

【问题标题】：How do you create this triangle thingy?你如何创建这个三角形的东西？
【发布时间】：2011-09-04 03:11:38
【问题描述】：

如何为指向某事物的容器创建三角形事物？是 Photoshop 吗？

【问题讨论】：

这是一个图像（带有 css），是的，除非它是一个 CANVAS 绘图。
我不认为这有纯 css，至少没有 css2。

【解决方案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;
}

【讨论】：

这是一个不错的解决方案，看起来一点也不疯狂
相关：CSS craziness and a new challenge :)
主要缺点是你需要弄乱标记才能做到这一点，但它仍然很整洁。
我唯一希望的是实际解决方案是答案文本的一部分。
我还有两个愿望吗？ :P 谢谢。

【解决方案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 的一个问题。

【讨论】：