CSS形状-三角形设计

我们可以只使用CSS创建以下图像吗？

我能够创建一个直角三角形.但我无法创建这个特定形状的三角形.任何帮助将不胜感激.

直角三角形设计代码:

#triangle,
#triangle3 {
  width: 0;
  height: 0;
  border-width: 100px 0 0 100px;
  border-style: solid;
  border-color: transparent transparent transparent #ff0033;
  float: left;
}
#triangle2,
#triangle4 {
  width: 0;
  height: 0;
  border-width: 0 100px 100px 0;
  border-color: transparent #294fa3 transparent transparent;
  border-style: solid;
  float: left;
  position: relative;
  left: -100px;
}
#triangle3 {
  position: relative;
  left: -100px;
}
#triangle4 {
  position: relative;
  left: -200px;
  /*specifically for 4*/
}