waysが2013年版でデザインが変わっていた。その記事ページになどに使われている著者のサムネイルがひし形になっているが、それはひし形に加工されている画像を使っているわけではないようだ。調べてみればなんてことない方法だが、なるほど、ってことで解説してみる。結論を先にいえば、transformプロパティを使う、ということだ。/></div>HTMLの方はシンプル。<img>とそれを包括する要素をtransformで変形させていく。サンプルはみんな大好きニコラス・ケイジで。CSSは下記のようにする。実際にやってみると形をつくること自体は簡単だが、上手くひし形に画像をはめるのは少し調整が必要。これを反映せたデモもあるので、こちらで色々と値をいじってみるといいだろう。ひし形以外にも、八角形やダイアモンドのような形にしたりというのも可能だ。transformを使っているので、実際に使うときには要素が他の要素とかぶらないように位置を微妙に調整するといったことは必要になるとはおもう。SpeakerBY-NC-SA。