如何创建这个三角形thingy？

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的问题。