Question

我想要两个三角形来制作一个矩形。然后我想把内容放到每个三角形中。我从这里开始关注上一个问题的答案：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>

Answer 1

我已经制作了一个片段，更好地说明了如何使用线性渐变来实现这一点：

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

#box {
  width: 100px;
  height: 100px;
}#box {
  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>

Answer 2

以下是线性梯度解决方案对响应块的改进：

＆＃13;

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

＆＃13;

<div class="box"></div>

＆＃13;

Answer 3

以下是使用border和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;
}

<div id="box"></div>

⋅ ⋅ ⋅

如果你真的想要两个不同的三角形，这里是上面的“分叉”解决方案，使用::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)

希望它有所帮助。

制作矩形的两个三角形

3 个答案: