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

问题描述

，边界相等宽度以 45 度角相互对接:

当你没有顶部边框时，它看起来像这样:

然后你给它一个宽度为 0...

...高度为 0...

...最后，您将两侧边框设为透明:

结果是一个三角形.

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.

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