CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

CSStransformプロパティ、 P.120の「平行四辺形」

課題

視覚的デザインの世界ではひし形に切り抜かれた画像をよく目にします

が、CSSだけを使ってこれを実現するのは容易ではありません。最近まで

は、これは基本的に不可能でした。 Web デザイナーがひし形の画像を表

示させようとしたら、画像編集ソフトウェアを使ってあらかじめ切り抜か

れた画像を用意しなければなりませんでした。言うまでもなく、このよう

なやり方は保守に適していません。画像のスタイルを変更するたびに新し

い画像が必要になり、大量の画像が残されます。

しかし今日では、よりよい方法がなんと2 つも考えられています。

ひし形の画像

11

124

3章：形状

トランスフォームを使った解決策

ここでのアイデアは、 P.120の「平行四辺形」で紹介した1 つ目の解決

策と共通です。画像を<div>で囲み、それぞれに打ち消し合うrotate()

関数を適用します。コードは以下のとおりです。

しかし、これだけでは望む表示効果を得られません（図3.19）。もちろ

ん、正八角形に画像を切り抜こうとしているならこれで作業は完了です。

ひし形にしたいなら、もう少し作業が必要なようです。

<divclass="picture">