[分享]css做旋转45度的正四边形

CSS 旋转可以让我们实现各种形状的效果，其中，正方形和正四边形是比较常见的效果。下面我们就来介绍一下如何用 CSS 来制作一个旋转 45 度的正四边形。.squre { width: 50px; h...

CSS 旋转可以让我们实现各种形状的效果，其中，正方形和正四边形是比较常见的效果。下面我们就来介绍一下如何用 CSS 来制作一个旋转 45 度的正四边形。

.squre {
  width: 50px;
  height: 50px;
  background-color: #f00;
  transform: rotate(45deg);
} 

上述代码中， .squre 是我们定义的一个样式类，用来表示一个正方形，它的宽度和高度都为 50px，背景颜色为红色。由于我们需要让这个正方形旋转 45 度，因此我们在这个样式类中加了一个 transform: rotate(45deg); 的属性。

使用这段代码，我们可以看到一个旋转 45 度的正方形，但是这个正方形并不是正四边形，如果我们想要得到一个正四边形，还需要一些额外的处理。

.squre {
  width: 50px;
  height: 50px;
  background-color: #f00;
  transform: rotate(45deg);
  clip-path: polygon(0 30%, 70% 100%, 30% 100%, 100% 30%);
} 

上述代码中，我们在 .squre 样式类中加入了一个 clip-path 的属性，其中， clip-path: polygon(0 30%, 70% 100%, 30% 100%, 100% 30%); 表示从左上角开始，依次连接了四个坐标点，这几个点的位置预先计算好后，可以得到一个正四边形的形状。使用这个属性后，我们就可以得到一个旋转 45 度的正四边形了。

除了使用以上的 clip-path 属性外，还可以通过其他方式来实现正四边形的效果。比如使用 transform 属性的 scale 函数，将一个长方形按比例缩小，就可以得到一个正方形。再旋转 45 度后，就可以得到我们需要的正四边形了。