CSC 画三角形

一、下面介绍CSS画三角形的原理

1.首先画一个div，给它宽高。再加上四条边的边框。

div {
    width: 50px;
    height: 50px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid black;
    border-bottom: 50px solid yellow;
}

运行结果：

image.png

2.div的width、height置零，看运行结果。

div {
    width: 0px;
    height: 0px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid black;
    border-bottom: 50px solid yellow;
}

image.png

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

div {
    width: 0px;
    height: 0px;
    border-top: 50px solid red;
    border-left:50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
}

image.png

4.去掉上边框。下面是等腰三角形

div {
    width: 0px;
    height: a0px;
    border-top: 50px solid transparent;
    border-left:50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
}

image.png

CSS三角形原理是：元素高度宽度为0，且没有下边框，左右边框透明即可。

要想画直角三角形。直接去掉右边框即可。

div {
    width: 0px;
    height: a0px;
    border-top: 50px solid transparent;
    border-left:50px solid blue;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
}

image.png

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

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

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

接下来看图：

image.png

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

代码如下：

.box1{
    width: 0;
    height: 0;
    border-left:100px solid  transparent;
    border-right: 100px solid  transparent;
    border-bottom: 100px solid blue;
}
.box2{
    width: 0;
    height: 0;
    border-left:100px solid  transparent;
    border-right: 100px solid  transparent;
    border-bottom: 150px solid black;
}
.box3{
   
    width: 0;
    height:0 ;
    border-left:100px solid  transparent;
    border-right: 70px solid  transparent;
    border-bottom: 100px solid green;
}
.box4{
    width: 0;
    height: 0;
    border-left:100px solid  transparent;
    border-right: 100px solid  transparent;
    border-bottom: 50px solid red;
}

三、 用三角形生成器生成

没有彩蛋怎么算过年，附上一枚懒人神奇，一秒钟出三角形，堪比渣渣辉：

css三角形生成器