时间戳

首页 > 解决方案 > 3 个不同形状的 div 在一起

html - 3 个不同形状的 div 在一起

问题描述

我希望你能帮助我。我有这个想法来创建 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>

标签： htmlcss

解决方案

试着让你的三角形是相对的，图形是绝对的

.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>

推荐阅读