css实现正方形上面有三角形

CSS实现正方形上面有三角形是一种常见的需求，可以通过CSS中border的使用来实现。下面是一段示例代码：

.square {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}
.square::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent black transparent;
  position: absolute;
  top: -50px;
  left: 0;
}

以上代码中，首先创建了一个正方形的容器，其边框为1px实线黑色，同时设置了相对定位。接着，使用伪元素::before创建了一个没有内容的元素，通过border的四个属性分别设置上、右、下、左的宽度，使其形成一个三角形，并设置边框颜色为黑色，上边框的宽度为0，其余三个边框宽度为50px，从而形成一个等边直角三角形。最后，设置该三角形的绝对定位，使其位于正方形的上方，距离顶部50px，左侧对齐，从而实现了这个效果。

此外，我们还可以通过CSS中transform属性的使用，将正方形旋转45度，从而实现一个支持任意角度的倾斜上三角形的效果。以下是一段示例代码：

.square {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
  transform: rotate(45deg);
}
.square::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent black transparent;
  position: absolute;
  top: -50px;
  left: 25px;
  transform: rotate(-45deg);
}

以上代码中，与第一个示例代码类似，也是创建了一个正方形的容器和一个伪元素，不同之处在于添加了transform:rotate(45deg)属性，使其顺时针旋转45度，从而倾斜了红色的正方形和三角形。同时也需要对三角形施加相同的旋转变换，从而使其与红色正方形“匹配”。