CSS Tricks - Shapes of 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>
等宽的边界以 45 度角相互对接:
当您没有顶部边框时,它看起来像这样:
然后你给它一个宽度为0 …
…和0的高度…
…最后,您使两侧边框透明:
这导致了一个三角形。