使用边框创建三角形

Question

我最近需要创建语音泡泡。要在讲话泡泡的末尾创建小三角形笔尖，我使用css technique，其中元素被赋予0 width和0 height并且给定边界。使某些边界透明会产生对角线。

这很好用，我可以操纵不同的边框来创建我喜欢的三角形/形状。问题是，我不完全理解为什么这样做。我知道这一切都是从rectangle开始的，当您将边框的one或more设置为透明时，它会创建一个对角线。我的问题是这是如何工作的？为什么它首先创造了对角线？

编辑：为了澄清，我想知道为什么这项技术有效的理论。

Answer 1

这是我能想到的最好的： http://jsfiddle.net/kuG6X/

Answer 2

我认为你的标题写得最好，“使用边框创建三角形”，就像现在听起来好像你想要三角形的边框一样。

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

示例将是顶部框架边框：

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

减少50％

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

宽度减小，使边缘相遇，形成三角形：

--
\/

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