CSS形状 - 三角形设计

Question

我们可以只使用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*/
}

<div id="triangle"></div>
<div id="triangle2"></div>
<div id="triangle3"></div>
<div id="triangle4"></div>

Answer 1

引用 Pragmatic：“较少支持转换”

所以我找到了一种没有它的出路：HTML：

<div id="triangle1"></div>
<div id="triangle2">
<div id="triangle3"></div>
<div id="triangle4"></div>

CSS：

#triangle1 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    float:left;
    position:relative;
}
#triangle2

{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
    position:relative;
    margin-left:50px;
}
#triangle3
{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    float:left;
    position:relative;
    margin-top:-100px;

}
#triangle4
{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
    position:relative;
    margin-top:-100px;
    margin-left:50px;

}

这是小提琴： http: //jsfiddle.net/9rgc728w/

我同意我的答案很长