实现三角形

如何用纯 CSS 画三角形？

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;  /* 上 左右 下 */
    border-color: transparent transparent #d9534f;
}

原理是：当盒子 width/height 为 0、相邻 border 设为 transparent 时，剩下的那一条边就会被"挤"出来，形成三角形。

补充：方向变化：

/* 向上的三角形 */
.triangle-up { border-width: 50px 50px 0; border-color: #d9534f transparent transparent; }
/* 向左的三角形 */
.triangle-left { border-width: 50px 50px 50px 0; border-color: transparent #d9534f transparent transparent; }
/* 向右的三角形 */
.triangle-right { border-width: 50px 0 50px 50px; border-color: transparent transparent transparent #d9534f; }

实际项目中常用 CSS clip-path 或 SVG 来画更复杂的箭头/对话气泡：

.arrow { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #d9534f; }