CSS 绘制三角形

昨天写页面，遇到了个三角形样式，第一反应图片切出来就行了，但又想，为啥不能直接用css写呢？于是琢磨了一下。

1 基本原理

用边框属性实现，具体参见下面的演示代码及其运行结果。

1.1 先造个梯形

代码

.box {
    width: 50px;
    height: 50px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid green;
    border-bottom: 50px solid yellow;
}

运行结果：

梯形.png

上图现象：当四条边框同时设置时，四个边框均呈现梯形。

1.2 梯形改造成三角形

不难猜想，把 .box 的长度和宽度都设成0，就可以得到四个等腰三角形。

代码

.box {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid green;
    border-bottom: 50px solid yellow;
}

运行结果

三角形出来了！.png

1.3 删掉多余的三角形

把其他三角形边框颜色设置成透明色（即：border-color : transparent;），留下需要的即可。

代码

.box {
    width: 50px;
    height: 50px;
    border-top: 50px solid transparent;
    border-left:50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
}

运行结果

留下需要的三角形.png

完了吗？
不不不还没完。接着看下去。

1.4 再优化一下

多了一截高度.png

检查元素，会发现.box的高度被上边框撑开了。虽然不是什么大问题，但强迫症忍不了。怎么解决呢，把上边框width设置成0即可，即border-top:0 solid transparent;

2 如何调整边框width来绘制各种形状的三角形

实际运用中，我们可能会需要制造各种形状的三角形，那么该怎么去调整三角形的形状呢？

底边固定时，只要调整顶点的位置，就可以控制形状。
顶点水平位置：由border-left和border-right决定，顶点向左调整时，需增加border-right，减少border-left；顶点向右调整时，反之。
顶点垂直位置：由border-bottom决定，border-bottom增加，顶点向上，反之向下。

接下来看图：

三角形变化.jpg

从1 到 2，三角形的顶点向右移动了，对应的，border-left增加了，border-right减少了。
从1 到 3，三角形的顶点向下移动了，对应的，border-bottom减少了。

代码如下：

.box1 {
    width: 0;
    height: 0;
    border-left:75px solid  transparent;
    border-right: 75px solid  transparent;
    border-bottom: 120px solid yellow;
}

.box2 {
    width: 0;
    height: 0;
    border-left:100px solid  transparent;
    border-right: 50px solid  transparent;
    border-bottom: 120px solid yellow;
}

.box3 {
    width: 0;
    height: 0;
    border-left:75px solid  transparent;
    border-right: 75px solid  transparent;
    border-bottom: 60px solid yellow;
}

具体数值怎么计算呢？这块需要回忆一下初中数学……我就不多说了。