[分享]css做四个角四个正方形

CSS是网页开发中不可或缺的一部分，通过CSS我们可以实现各种各样的效果，今天我们来学习CSS如何做出四个角四个正方形的效果。.square { width: 100px; height: 100px...

CSS是网页开发中不可或缺的一部分，通过CSS我们可以实现各种各样的效果，今天我们来学习CSS如何做出四个角四个正方形的效果。

.square {
  width: 100px;
  height: 100px;
  position: relative;
}

.square::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.square::after {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
} 

以上是实现四个角正方形的CSS代码，首先我们需要一个宽高都为100px的div组件，然后通过组件的:before和:after伪元素来实现四个角的效果，伪元素的内容为空，利用CSS的border属性来实现三角形，其中一条边是透明的。

通过上面的代码，我们成功实现了四个角四个正方形的效果。