css3 三角形

/* 使用 CSS3 创建一个三角形 */

/* 1. 创建一个向下的三角形 */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框设置为透明 */
    border-right: 50px solid transparent; /* 右边框设置为透明 */
    border-top: 100px solid red; /* 上边框设置为红色，形成三角形 */
}

/* 2. 创建一个向上的三角形 */
.up-triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框设置为透明 */
    border-right: 50px solid transparent; /* 右边框设置为透明 */
    border-bottom: 100px solid blue; /* 下边框设置为蓝色，形成三角形 */
}

/* 3. 创建一个向左的三角形 */
.left-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent; /* 上边框设置为透明 */
    border-bottom: 50px solid transparent; /* 下边框设置为透明 */
    border-right: 100px solid green; /* 右边框设置为绿色，形成三角形 */
}

/* 4. 创建一个向右的三角形 */
.right-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent; /* 上边框设置为透明 */
    border-bottom: 50px solid transparent; /* 下边框设置为透明 */
    border-left: 100px solid yellow; /* 左边框设置为黄色，形成三角形 */
}

解释说明：

• 宽度和高度为0：通过将元素的宽度和高度设置为0，我们可以通过边框来创建三角形。
• 边框颜色和透明度：通过设置不同方向的边框颜色为透明（transparent），并且只保留一个方向的边框颜色为非透明，可以形成一个三角形。
• 不同的方向：通过调整不同方向的边框颜色，可以创建不同方向的三角形（向上、向下、向左、向右）。