Creating triangles using borders
I recently needed to create speech bubbles. To create a small triangular tip at the end of the speech bubble, I used the CSS method where 0
width
both 0
height
and and given borders are assigned to the element . Creating transparent borders creates diagonals.
This works great and I can manipulate different borders to create triangles / shapes to my liking. The problem is I don't quite understand why this works. I understand that it all starts with a rectangle and when you set one or more borders for transparency it creates a diagonal. My question is, how does it work? And why does this create a diagonal in the first place?
EDIT: To clarify, I would like to know the theory behind why this technique works.
source to share
I think your headline would be best written, "Creating Triangles Using Borders," as right now it sounds like you want borders around your triangles.
Think about the frame. It is in four parts, each with 45-degree ends that match the other parts of the frame. If the border was so short that the 45-degree end actually touched the inner edge, you would have a triangle.
And an example would be the top border of the border:
---------------- \ ______________ /
Decrease 50%
--------- \ _______ /
Reduced in width so that the edges intersect to form a triangular shape:
- \ /
If this was the only visible frame, you could see a triangular shape.
source to share