CSS：CSS实现三角形

Triangle.css

:root{ --long: 20px; --short: 10px; --border-color: red; } /* 上三角形 */ .triangle_top{ height: 0; width: 0; border-bottom: var(--long) solid var(--border-color); border-right: var(--short) solid transparent; border-left: var(--short) solid transparent; } /* 右三角形 */ .triangle_right{ height: 0; width: 0; border-left: var(--long) solid var(--border-color); border-top: var(--short) solid transparent; border-bottom: var(--short) solid transparent; } /* 下三角形 */ .triangle_bottom{ height: 0; width: 0; border-top: var(--long) solid var(--border-color); border-right: var(--short) solid transparent; border-left: var(--short) solid transparent; } /* 左三角形 */ .triangle_left{ height: 0; width: 0; border-right: var(--long) solid var(--border-color); border-top: var(--short) solid transparent; border-bottom: var(--short) solid transparent; } /* 左上三角形 */ .triangle_Rtop{ height: 0; width: 0; border-top: var(--long) solid var(--border-color); border-right: var(--long) solid transparent; } /* 左下三角形 */ .triangle_Rbottom{ height: 0; width: 0; border-bottom: var(--long) solid var(--border-color); border-right: var(--long) solid transparent; } /* 右上三角形 */ .triangle_Ltop{ height: 0; width: 0; border-top: var(--long) solid var(--border-color); border-left: var(--long) solid transparent; } /* 右下三角形 */ .triangle_Lbottom{ height: 0; width: 0; border-bottom: var(--long) solid var(--border-color); border-left: var(--long) solid transparent; }