使用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>

原文由 Jayakrishnan 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Jayakrishnan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

div 和它的伪元素应该分别具有相同的宽度和 border-left。 div 和它的伪元素应该分别具有相同的高度和边框顶部。

 html, body {
  margin: 0;
}

.box {
  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/

原文由 karthick 发布，翻译遵循 CC BY-SA 4.0 许可协议