问题

CSS技巧 - CSS形状中有许多不同的CSS形状,我对一个三角形特别困惑:

CSS三角形

#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>

它如何以及为什么起作用?



解决方法

CSS Triangles: A Tragedy in Five Acts

由于 alex说,边框相等宽度以45度角彼此对接:

边界以45度角相交,内容在中间

当您没有顶边框时,它如下所示:

无顶边框

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

无宽度

...和高度为0 ...

没有高度

...最后,让两个边框透明:

透明边框

这将产生一个三角形.

结束




相关问题推荐