css 正方形 左上角是斜角

CSS 可以通过伪元素 `::before` 和 `::after` 来创建一个带斜角的正方形效果。这里是一个简单的例子，你可以将下面的 CSS 应用于一个 `div` 元素：

.square {
  width: 200px;
  height: 200px; /* 如果你想让正方形边长一致 */
  position: relative; /* 给父元素设置定位以便添加伪元素 */
}

.square::before,
.square::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit; /* 设置为与正方形背景相同的颜色 */
  transform: rotate(45deg); /* 创建斜角效果 */
}

.square::before {
  transform-origin: bottom right; /* 斜角的起始点在右下角 */
}

.square::after {
  transform-origin: top left; /* 斜角的结束点在左上角 */
}

在这个例子中，`.square::before` 创建了从右下角到左上角的斜线，而 `.square::after` 则是从左上角到右下角的斜线。两个元素组合起来形成了一个完整的正方形。