两个三角形组成一个矩形答案

【问题标题】：Two triangles to make a rectangle两个三角形组成一个矩形
【发布时间】：2018-06-08 16:56:21
【问题描述】：

我试图让两个三角形组成一个矩形。然后我想将内容放入每个三角形中。我正在关注上一个问题的答案：Previous Question。

我的问题是，如果高度不够大，我无法将矩形设为width: 80vw。然后，我不确定如何将内容放入 after 元素中，或者如果知道我会将内容放入三角形中，这是否是最好的设计方法。

有谁知道我该怎么做或有更好的解决方案？

#tierBoxSec {
    position: relative;
    height: auto;
    width: 100%;
}

.box {
    width: 80vw;
    height: 200px;
    background: radial-gradient(at top left, #FFF 49%, #b82222 50%, #b82222 100%);
}

<section id="tierBoxSec">
    <div class="box"></div>
</section>

【问题讨论】：

出于对伪选择器的个人仇恨，我建议使用线性渐变。这是一个很好的例子：codepen.io/machal/pen/licEd
@Our_Benefactors 感谢您的建议。我刚刚编辑了我的片段以尝试执行此操作。我不知道如何使线性渐变成为锐角分割。有什么想法吗？

标签： html css pseudo-element

【解决方案1】：

我制作了一个 sn-p 更好地说明如何使用线性渐变：

red 50%, blue 50% 为每种颜色设置了 50% 的“颜色停止”，这意味着它们不会继续超过渐变区域的 50%。例如，您可以通过red 25%, blue 25% 之类的操作来创建不同的分界线。

#box {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, red 50%, blue 50%);
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient -->
<body>
  <div id="box">
  </div>
</body>

【讨论】：

【解决方案2】：

这是线性梯度解决方案的改进，具有响应块：

.box {
  width: 80vw;
  height: 80vh;
  background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

这是使用borders 和box-sizing 的解决方案：

#box {
  height: 8vh;
  width: 80vh;
  box-sizing: border-box;
  background: red;
  border-style: solid;
  border-width: 8vh 80vh;
  border-color: blue red red blue;
}

&lt;div id="box"&gt;&lt;/div&gt;

⋅ ⋅ ⋅

如果你真的想要两个不同的三角形，这里是上述的“分叉”解决方案，使用 ::after 伪元素：

#box {
  position: relative;
  height: 8vh;
  width: 80vh;
  box-sizing: border-box;
  border: solid transparent;
  border-width: 8vh 80vh;
  border-top-color: blue;
  border-right-color: blue;
}

#box::after {
  position: absolute;
  content: '';
  border: solid transparent;
  border-width: 8vh 80vh;
  border-bottom-color: red;
  border-left-color: red;
  transform: translate(-50%, -40%); /* Change -40% to -50% if you want the two triangle to stick */
}

<div id="box"></div>
<br>
(I've let a space just to show you)

希望对你有帮助。

【讨论】：