CSS画三角形

通过CSS实现三角形的绘制，主要利用了border属性的特性。当一个元素设置为无宽度和高度，并且只保留一个方向的边框颜色，其余方向设置为透明时，就可以形成一个三角形。

基本原理

CSS中的border属性不仅可以用来绘制矩形边框，还可以通过巧妙地设置不同方向的边框宽度、颜色和透明度来生成三角形。核心在于理解border在渲染时会形成斜边的效果。下面是一个简单的例子来展示如何用CSS画一个向上的三角形：

css
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边框 */
border-right: 50px solid transparent; /* 右边框 */
border-bottom: 100px solid blue; /* 底边框 */
}


在这个例子中，.triangle-up类定义了一个向上指的蓝色三角形。width和height都设为0，然后通过设置左右边框为透明，底部边框为蓝色并赋予一定的宽度，这样就形成了一个向上的三角形。

不同方向的三角形

除了向上的三角形，我们还可以通过调整边框的方向和颜色来创建指向不同方向的三角形。

向下的三角形

css
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}


这里.triangle-down类创建了一个向下的红色三角形，只需将顶部边框设为有颜色，而底部边框设为透明即可。

向左的三角形

css
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid green;
}


.triangle-left类创建了一个向左的绿色三角形，关键在于右侧边框有颜色，上下边框透明。

向右的三角形

css
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid orange;
}


.triangle-right类则生成了一个向右的橙色三角形，左侧边框有颜色，上下边框透明。

动态调整大小和颜色

如果想要动态调整三角形的大小和颜色，可以使用CSS变量或者JavaScript来改变border的宽度和颜色值。例如：

css
:root {
    --triangle-size: 50px;
    --triangle-color: purple;
}</p>

<p>.triangle-dynamic {
    width: 0;
    height: 0;
    border-left: var(--triangle-size) solid transparent;
    border-right: var(--triangle-size) solid transparent;
    border-bottom: calc(var(--triangle-size) * 2) solid var(--triangle-color);
}

这样可以通过修改:root中的变量值轻松调整所有采用该样式三角形的外观。这种方法不仅增强了代码的可维护性，还提高了灵活性。