css三角形全等

在前端开发中，CSS三角形经常被使用。其中最基础的一种是等腰直角三角形。这种形状可以使用CSS实现，而且可以通过CSS的变化和嵌套，实现不同形状的等腰直角三角形，更进一步，实现其他形状的三角形。

首先，我们来看一下实现等腰直角三角形的代码，如下：

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #ccc;
  border-right: 20px solid transparent;
} 

这段代码使用了CSS的border属性，其中border-top设置了三角形的高度，而border-right设置了三角形的底边和斜边。由于三角形是等腰直角三角形，因此底边长度等于高度。

接下来，我们来看一下如何实现全等三角形。由于三角形的面积是由高度和底边的乘积除以2计算的，因此我们只要保证另一个三角形的高度和底边与第一个三角形的高度和底边相等，那么两个三角形就是全等的。实现代码如下：

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #ccc;
  border-right: 20px solid transparent;
}
.triangle2 {
  width: 0;
  height: 0;
  border-top: 20px solid #ccc;
  border-right: 20px solid transparent;
  transform: scaleY(-1);
} 

使用了CSS3的transform属性，将第二个三角形沿着x轴翻转180度，实现高度和底边与第一个三角形相等的效果。这样，通过代码实现全等三角形的效果。