一句话学会用简单css3绘制各种三角形（也可类比梯形）

本文链接：https://blog.csdn.net/mutian54/article/details/122013101

首先贴出代码，其中border的四个边分别对应四块内容，并将正方形均等分割。

先放总结：取消对位隐两边。

.power-box-connect{
  width: 0;
  height: 0;
  border-top: 60px solid blueviolet;
  border-left: 60px solid yellowgreen;
  border-right: 60px solid red;
  border-bottom: 60px solid gray;
}

上述代码的实现效果如下：

一个三角形的实现，至少需要三条边，所以border必须写三条及以上。

关于直角三角形的两种方式

1、四边都写的方式，如下图：

下、右为gray，左上为blue

如果需要左上，右下颜色设置为transparent即可。同理可取任意方向直角三角形

2、写三边的方式，如下图：

下图是四条边的情况，当取消一条边的时候

，将该条边所有该边的所有都直接切割出去，如下所示：

切割后所示：红圈圈住的即为两个缩小的直角三角形，只需要将另外两边设置为transparent透明即可。

等腰三角形或者其他的三角形我直接放图，道理和上面相似。

下图为等腰三角形实现

总结：

如果想获取图下任意一个三角形

1、将其对位的取消边。

2、将其另外两边变transparent。

例如：

想取a上，a下不要，b左b右透明即可。

也可写简单代码，如下：

                 width: 0;
       height: 0;
       border: 120px solid blue;
// 上右下左
       border-color: blue transparent transparent transparent;