0

利用した:

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 にすることです。

4

1 に答える 1