CSS三角形如何工作？ [英] How do CSS triangles work?

问题描述

有许多不同的CSS形状，在，等宽的边界以45度角彼此对接：

当您没有顶部边框时，它如下所示：

然后你给它的宽度为0 ...

...和高度为0 ...

...最后，边框透明：

这会产生一个三角形。

结束 b

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

How and why does it work?

解决方案

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

When you have no top border, it looks like this:

Then you give it a width of 0...

...and a height of 0...

...and finally, you make the two side borders transparent:

That results in a triangle.

The End

这篇关于CSS三角形如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！