小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

在项目开发中，我们可能会遇到三角形样式的需求，虽然我们可以用图片来代替，但是用代码写的会更优雅一点。

容器

<div class="triangle"></div>

绘制三角形我们准备一个div元素足以，接下来就是它的变身时刻。

样式

人靠衣裳马靠鞍，样式不同形在变。绘制三角形样式主要是利用border属性，一边给具体的颜色，其他的边给透明色。

等腰三角形 向上

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-left:var(--bw) solid transparent;
    border-right:var(--bw) solid transparent;
    border-bottom:calc(var(--bw) * 2) solid red;
}

等腰三角形 向下

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-left:var(--bw) solid transparent;
    border-right:var(--bw) solid transparent;
    border-bottom:calc(var(--bw) * 2) solid red;
}

等腰三角形 向左

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-top:var(--bw) solid transparent;
    border-bottom:var(--bw) solid transparent;
    border-right:calc(var(--bw) * 2) solid red;
}

等腰三角形 向右

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-top:var(--bw) solid transparent;
    border-bottom:var(--bw) solid transparent;
    border-left:calc(var(--bw) * 2) solid red;
}

这些都是等腰三角形，我们通过改变border的颜色而改变三角形的方向，三角形的形状我们可以通过改变border的宽度而改变。

等腰直角三角形

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    
    /* 直角左上 */
    border-bottom:var(--bw) solid transparent;
    border-left:var(--bw) solid red;
    
    /* 或 直角左下 */
    border-top:var(--bw) solid transparent;
    border-left:var(--bw) solid red;
    
    /* 或 直角右上 */
    border-bottom:var(--bw) solid transparent;
    border-right:var(--bw) solid red;
            
    /* 或 直角右下 */
    border-top:var(--bw) solid transparent;
    border-right:var(--bw) solid red;
}

因为是等腰直角三角形，所以上述图案中每个样式的写法有两种，在此我只写了一种，当然如果你想根据其中一种形状进行旋转变换成其他的形状也是可以做到的。这些是项目中常用的形状，你如果改变border的宽度形状也会发生变化。

总结

1. 等腰三角形是通过一边给具体的颜色，相邻两边给透明色得来的。

2. 等要直角三角形是通过一边给具体的颜色，相邻的其中一边给透明色得来的。

3. 改变border的宽度形状会发生变化。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。