毎年12月に著名なWeb（+α）界隈の方々で綴られるアドベントカレンダーメディア、24 waysが2013年版でデザインが変わっていた。 その記事ページになどに使われている著者のサムネイルがひし形になっているが、それはひし形に加工されている画像を使っているわけではないようだ。 調べてみればなんてことない方法だが、なるほど、ってことで解説してみる。結論を先にいえば、transformプロパティを使う、ということだ。 <div class="diamond"> <img src="http://placecage.com/450/450" alt="Cage" /> </div> HTMLの方はシンプル。<img>とそれを包括する要素をtransformで変形させていく。 とりあえずサンプルはみんな大好きニコラス・ケイジで。 そしてCSSは下記のようにする。 .diamond { overfl