css - 用css画3个三 Angular 形

Question

我正在尝试用 CSS 进行上面的设计。 我尝试使用剪辑路径将三 Angular 形置于中心，但随后看不到蓝色和绿色三 Angular 形。我怎样才能使它成为屏幕的宽度并且也具有响应性？

这些是三 Angular 形的剪辑路径:

.centerTriangle {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: red;
}

.leftTriangle {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  background-color: blue;
}

.rightTriangle {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-color: green;
}

<div class="leftTriangle"></div>
<div class="centerTriangle"></div>
<div class="rightTriangle"></div>

非常感谢任何帮助，谢谢!

Answer 1

渐变可以做到这一点:

html {
  min-height:100%;
  
  background:
    linear-gradient(to top right,blue  50%,red 0) left /50.1% 100% no-repeat,
    linear-gradient(to top left ,green 50%,red 0) right/50.1% 100% no-repeat;
}