css - cssを使用して対角線で分割されたツートンカラーの背景

Question

css を使用して、片側が無地でもう一方がテクスチャである背景を作成しようとしています。2 つは対角線で分割されています。右側をクリックするとグレーの三角形が小さくなり、左側をクリックするとテクスチャ付きの三角形が小さくなります (カーテン効果のように)。アドバイスをいただければ幸いです。

Answer 1

ハードトランジションで背景グラデーションを使用することは、非常にクリーンなソリューションだと思います。

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}

Answer 2

実際の例を次に示します: http://jsbin.com/iqemot/1/edit

境界ピクセルで対角線の配置を変更できます。ただし、このアプローチでは、バックグラウンド設定の上にコンテンツを配置する必要があります。

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-right: 100px solid transparent;
}

<div id="container">
  <div id="triangle-topleft"></div>
</div>