css 画三角形的原理是利用盒子边框完成的，实现步骤可以分为以下四步: 1设置一个盒子 2设置四周不同颜色的边框 3将盒子宽高设置为 0，仅保留边框 4得到四个三角形，选择其中一个三角形后，将其他三角形的边框颜色设置颜色为透明。但这种方式，虽然视觉上是实现了三角形，但实际上，隐藏的部分任然占据部分高度，需要将上方的宽度去掉。
.triangle { width: 0px; height: 0px; border-top: 100px solid transparent; border-bottom: 100px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; } <div class=”triangle”></div>
利用伪元素画一个三角形
#triangle { margin: 100px; /* width: 100px; height: 100px; */ background-color: pink; position: relative; } #triangle::before { position: absolute; content: “”; width: 0; height: 0; top: 0px; left: 100px; border-top: solid 50px transparent; border-left: solid 50px pink; border-bottom: solid 50px transparent; }<div id=’triangle’></div>