使用CSS将矩形沿对角线分为2个三角形

Question

我想将div分成2个三角形（如下所示，如果1是父级的背景，则没问题），上一个颜色一个，下一个颜色另一个。我不介意它是如何实现的，但我想在CSS（而不是JavaScript）中实现。我尝试了CSS旋转，（下面的代码），但是它没有响应。在较小或更宽的屏幕上，它会失真。有什么办法可以在CSS中实现呢？

body {
  background: #eee;
}

.darker {
  position: fixed;
  top: -94%;
  left: -10%;
  width: 150%;
  height: 150%;
  background: #dd4f39;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

<div class="darker">&nbsp;</div>

Answer 1

我从这里找到了一种有趣的方法，它使用clip-path 。 回答我自己的问题，以便每个人都可以使用它。

html,
body {
  margin: 0;
}

body {
  background: #eee;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

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

Answer 2

这是一种方法。但是，这种用例严格来说是针对大众的。只要确保为这些元素赋予相同的价值

div及其伪元素应分别具有相同的宽度和border-left。div及其伪元素应分别具有相同的高度和border-top。

html, body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.box:after {
  content: ' ';
  border-top: 100vh solid #dd4f39;
  border-left: 100vw solid transparent;
  width: 0;
  position: absolute;
}

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

JS小提琴 https://jsfiddle.net/kqsrmrss/2/