利用纯 CSS 绘制三角形

四月 29, 2024 3744

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。

对绘制原理不做过多解释，但是对样式的配置步骤流程有完整的演示，看完之后就能自己理解其中的原理。

1. 绘制一个正方形black

1
2
3
4
5
.step1 {
    width: 50px;
    height: 50px;
    background: white;
}

2. 添加一个粗边框

1
2
3
4
5
6
.step2 {
    width: 50px;
    height: 50px;
    background: white;
    border: 20px solid blue;
}

3. 分别给边框取不同的颜色

1
2
3
4
5
6
7
8
9
10
.step3 {
    width: 50px;
    height: 50px;
    background: white;
    border: 20px solid;
    border-top-color: red;
    border-bottom-color: blue;
    border-left-color: green;
    border-right-color: orange;
}

4. 缩小正方形尺寸

1
2
3
4
5
6
7
8
9
10
.step4 {
    width: 20px;
    height: 20px;
    background: white;
    border: 20px solid;
    border-top-color: red;
    border-bottom-color: blue;
    border-left-color: green;
    border-right-color: orange;
}

5. 无限缩小

1
2
3
4
5
6
7
8
9
10
.step5 {
    width: 0;
    height: 0;
    background: white;
    border: 20px solid;
    border-top-color: red;
    border-bottom-color: blue;
    border-left-color: green;
    border-right-color: orange;
}

6. 只保留下边框的颜色

1
2
3
4
5
6
7
8
.step6 {
    width: 0;
    height: 0;
    background: white;
    border: 20px solid;
    border-color: transparent;
    border-bottom-color: blue;
}

7. 去除上边框，缩小测边框

1
2
3
4
5
6
7
8
9
.step7 {
    width: 0;
    height: 0;
    background: white;
    border: 20px solid;
    border-color: transparent;
    border-bottom-color: blue;
    border-top-width: 0;
}

8. 去除白色背景

1
2
3
4
5
6
7
8
.step8 {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent;
    border-bottom-color: blue;
    border-top-width: 0;
}

9. 重新整理样式

1
2
3
4
5
6
7
.step9 {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: blue;
    border-top-width: 0;
}

大功告成！