使用边框创建三角形 [英] Creating triangles using borders

问题描述

我最近需要创建语音气泡。要在气泡结尾处创建小三角形提示，我使用了 css技术，其中元素给予 0 width 和 0 height 和给定的边框。使某些边界透明将创建对角线。

I recently needed to create speech bubbles. To create the little triangular tip at the end of the speech bubble, i used a css technique where the element is given a 0 width and 0 height and given borders. Making certain borders transparent would create diagonals.

这很好，我可以操纵不同的边框来创建我喜欢的三角形/形状。问题是，我不完全明白为什么这个工作。我理解，这一切都以矩形开头，并且您设置一个或更多的边框到透明它创建一个对角线。我的问题是这是如何工作的？为什么它首先创造一个对角线？

This works great, and i am able to manipulate different borders to create triangles/shapes to my liking. The problem is, i don't fully understand why this works. I understand that it all starts out with a rectangle and as you set one or more of the borders to transparent it creates a diagonal. My question is how does this work ? And why does it create a diagonal in the first place ?

编辑：为了阐明，我想知道为什么这种技术有效的原理。

To clarify, i would like to know the theory behind why this technique works.

推荐答案

我认为你的标题最好写成使用边框创建三角形，现在听起来好像你想要的

I think your title would be best written, "Creating triangles using borders," as right now it sounds as though you want borders around your triangles.

想象一个相框。它由四个部分组成，每个具有45度端，与其他框架部分相遇。如果边框很短，45度的端点实际上在内边缘触摸，那么您将有一个三角形。

Think of a picture frame. It's made of four parts, each with 45 degree ends which meet with the other frame parts. If the border was so short that the 45 degree ends actually touched at inner edge, you would have a triangle.

例如顶部框架边框：

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

减少50％

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

缩小宽度以使边缘相交，形成三角形：

Reduced in width so that edges meet, forming a triangular shape:

--
\/

如果这是唯一可见的框线边框，您将看到三角形的效果。

If this were the only visible frame border, you would have the effect of seeing a triangular shape.

这篇关于使用边框创建三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！