CSSでちょっと面白い画像の加工方法があったので、メモ。
正方形の画像をCSSだけでひし形にトリミングしちゃうって方法。

↓ようはこんな感じ
DEMO

HTML構造はimgの前に親要素のdivで囲う
【HTML】

  <div class="square">
    <img src="sample02.jpg" alt="sample">
  </div>

そんで、CSSはこんな感じ
【CSS】

.square {
  display: block;
  width: 200px;
  height: 200px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;
}
.square img {
  width: 150%;
  height: auto;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg) translateX(-23%);
  transform: rotate(45deg) translateX(-23%);
}

imgを囲っている「.square」で、
（1）幅と高さを指定
（2）transform: rotateで45度回転
（3）はみ出した画像は「overflow: hidden;」で非表示にする

そんで、「.square」のimg要素に対して、
（1）transform: rotateで画像だけ回転させて、もとの角度に戻す
（2）正方形からひし形になったので、表示される横幅が大きくなったので「width: 150%;」で拡大

欠点としては、「width」と「height」を指定しないといけないので、可変するレイアウトには向いていない。
レイアウトのあしらいとかワンポイントにはいいかも。
ちなみに画像の縦横比は均等の正方形じゃないとうまくいかないので、ご注意を。