如何在css中创建3个div偏斜

<div class="container">
  <div class="slant"></div>
  <div class="slant"></div>
  <div class="slant"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.slant {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: skew(20deg);
}

.slant:nth-child(1) {
  background-color: #f00;
  transform: skew(20deg);
}

.slant:nth-child(2) {
  background-color: #0f0;
  transform: skew(30deg);
}

.slant:nth-child(3) {
  background-color: #00f;
  transform: skew(40deg);
}