利用した:
http://apps.eky.hk/css-triangle-generator/
互いに対角線上に配置された 2 つの不等辺三角形の CSS を生成するには、次のようにします。
左下の三角形
width: 0px;
height: 0px;
border-style: solid;
border-width: 317px 0 0 512px;
border-color: transparent transparent transparent #007bff;
右上の三角形
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 317px 512px;
border-color: transparent transparent #007bff transparent;
ただし、このテストjsFiddleでは、2つの三角形の間に線またはギャップがあるようで、それを取り除くことができませんでした:
http://jsfiddle.net/rwone/MB5Lt/4/
編集
解決策は、コンテナーが 512px であっても、両方の三角形の幅を 514px にすることです。