css 小三角

/* 使用 CSS 创建一个小三角形 */

/* 向下的小三角 */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
}

/* 向上的小三角 */
.up-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
}

/* 向左的小三角 */
.left-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid black;
}

/* 向右的小三角 */
.right-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
}

解释说明：

• 向下的小三角：通过设置 border-top 为黑色，而左右两边的边框为透明，形成一个向下的三角形。
• 向上的小三角：通过设置 border-bottom 为黑色，而左右两边的边框为透明，形成一个向上的三角形。
• 向左的小三角：通过设置 border-right 为黑色，而上下两边的边框为透明，形成一个向左的三角形。
• 向右的小三角：通过设置 border-left 为黑色，而上下两边的边框为透明，形成一个向右的三角形。

每个三角形的大小可以通过调整边框的宽度来控制。