html - 使用css将一个矩形沿对 Angular 线分成2个三 Angular 形

Question

我想将一个 div 分成 2 个三 Angular 形(如下所示，如果 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

我从 here 中找到了一种有趣的方法来做到这一点，它使用 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>