html - css を使用してダイヤモンド オーバーレイ イメージを作成する

Question

cssを使用して以下のようなものを構築するにはどうすればよいですか? 背景の色に常に従う画像のダイヤモンドカットアウトが必要です。

Answer 1

Lloan の回答に追加したいこと: 画像を元の向きのままにして、単純にそれらからひし形を切り取る場合は、少し異なることを行う必要があります。

以下の例では、正方形が表示されているひし形です。「正方形」が使用されている画像の端を適切に切り取ることができるように、そこに Pic がネストされています。このようにして、「正方形」をひし形に回転させ、画像を回転させて元の向きに戻すことができます。

body {
  /* To show the background color is no problem here */
  background-color: #efefef;
}

.square {
  width: 100px;
  height: 100px;
  margin: 25px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;
}
.pic {
  background: url(http://placekitten.com/g/150/150);
  width: 150px;
  height: 150px;
  margin: -25px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="square">
  <div class="pic">

  </div>
</div>