小编典典

CSS 三角形是如何工作的?

javascript

CSS Tricks - Shapes of 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>

阅读 209

收藏
2022-02-13

共1个答案

小编典典

CSS 三角形:五幕中的悲剧

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

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

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

没有上边框

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

没有宽度

…和0的高度…

也没有身高

…最后,您使两侧边框透明:

透明侧边框

这导致了一个三角形。

2022-02-13