css - 使用边框创建三 Angular 形

Question

我最近需要创建对话泡泡。为了在对话气泡的末端创建小三 Angular 形尖端，我使用了 css technique。其中元素被赋予了 0 width 和 0 height 以及给定的边框。使某些边界透明会产生对 Angular 线。

效果很好，我可以根据自己的喜好操纵不同的边框来创建三 Angular 形/形状。问题是，我不完全理解为什么会这样。我知道这一切都始于 rectangle当你设置 one或 more透明的边框创建一条对 Angular 线。我的问题是这是如何工作的？为什么它首先创建对 Angular 线？

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

Answer 1

我认为您的标题最好写成“使用边框创建三 Angular 形”，因为现在听起来好像您想在三 Angular 形周围添加边框。

想想一个相框。它由四个部分组成，每个部分都有 45 度的末端与其他框架部分相交。如果边界太短以至于 45 度的末端实际上在内边缘接触，你就会有一个三 Angular 形。

例如顶部框架边框:

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

减少 50%

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

减少宽度使边缘相交，形成三 Angular 形:

--\/

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