如何在下面提到的格式中使用css创建一个带有斜率效果的4个div？

.div1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff0000, #0000ff);
  transform: skew(-20deg);
  z-index: -1;
}

.container {
  position: relative;
}

.div1, .div2, .div3, .div4 {
  position: absolute;
  width: 200px;
  height: 200px;
}

.div1 {
  top: 0;
  left: 0;
}

.div2 {
  top: 0;
  right: 0;
}

.div3 {
  bottom: 0;
  left: 0;
}

.div4 {
  bottom: 0;
  right: 0;
}

.div1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff0000, #0000ff);
  transform: skew(-20deg);
  z-index: -1;
}

.div2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00ff00, #ffff00);
  transform: skew(20deg);
  z-index: -1;
}

.div3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  transform: skew(-20deg);
  z-index: -1;
}

.div4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #000000, #ffffff);
  transform: skew(20deg);
  z-index: -1;
}