使用边框创建三角形

Question

我最近需要创建气泡。为了在对话泡泡末端创建小三角形尖端，我使用了一个css technique，其中元素给出了0width和0height和给定的边界。使某些边界透明将创建对角线。

这很好，我能够操纵不同的边界来创建我喜欢的三角形/形状。问题是，我不完全明白为什么这会起作用。我知道这一切都始于rectangle，并且当您将one或more的边框设置为透明时，它会创建对角线。我的问题是如何工作？为什么它首先创建一个对角线？

编辑：澄清，我想知道背后的理论为什么这种技术的作品。

Answer 1

我觉得你的标题会写得最好的，“使用边界创建三角形，”因为现在它听起来好像你想在你的三角形的边界。

想象一下相框。它由四个部分组成，每个部分都有45度的端部，与其他框架部件相遇。如果边界如此短以至于内边缘实际上触及了45度的末端，那么您会有一个三角形。

和例子是顶框边：

---------------- 
\______________/

减少50％

--------- 
\_______/

在宽度减小，使得边缘相接，形成一个三角形的形状：

-- 
\/

如果这是唯一可见的边框，则会看到三角形的效果。

Answer 2

这是我能拿出最好的： http://jsfiddle.net/kuG6X/