3个不同形状的Divs在一起

Question

希望您能帮助我。我有这个想法来创建3个具有不同形状的div。第一个三角形第二个菱形第三个三角形。当放在一起时，它们形成一个矩形。我创建了3个div数字，但将它们组合在一起时遇到了问题。感谢您的帮助。

注意：我尝试过flex，但随后将主div分为3个并行部分。

HTML

.triangle {
  width: 80%;
  height: 300px;
  border: 2px solid black;
  margin: 20px auto;
  background: grey;
}

.triangle .figure_1 {
  width: 50%;
  display: inline-flex;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  background: green;
}

.triangle .figure_2 {
  width: 100%;
  clip-path: polygon(0% 0%, 50% 100%, 100% 100%, 50% 0%);
  background: yellow;
}

.triangle .figure_3 {
  width: 50%;
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  background: red;
}

<div id="triangle" class="triangle">
  <div id="figure_1" class="figure_1">

  </div>
  <div id="figure_2" class="figure_2">

  </div>
  <div id="figure_3" class="figure_3">

  </div>
</div>

    

Answer 1

尝试使三角形为相对三角形，使图形为绝对三角形

.triangle {
  width: 80%;
  height: 300px;
  border: 2px solid black;
  margin: 20px auto;
  background: grey;
  position: relative;
}

.triangle .figure_1 {
  width: 50%;
  display: inline-flex;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  background: green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.triangle .figure_2 {
  width: 100%;
  clip-path: polygon(0% 0%, 50% 100%, 100% 100%, 50% 0%);
  background: yellow;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.triangle .figure_3 {
  width: 50%;
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  background: red;
      position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<div id="triangle" class="triangle">
  <div id="figure_1" class="figure_1">

  </div>
  <div id="figure_2" class="figure_2">

  </div>
  <div id="figure_3" class="figure_3">

  </div>
</div>