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

知っておくべきポイント

CSSグラデーション、 background‐size、 P.78の「ストライプ模

様の背景」

課題

角を切り落とされた四角形は、印刷物でも Web でもよく見られます。

ここでは、要素が持つ角のうちの1 つまたは複数が 45 度に切り落とされま

す。近年ではフラットデザインがスキューモーフィズム（実物に似せたデ

ザイン）に取って代わりつつあり、このような角の切り落としの使われる

機会が増えてきました。右上と右下の角で、それぞれ要素の高さの半分に

な る よ う に 切 り 落 と し を 行 う と 、 ボ タ ン や パ ン く ず リ ス ト

（breadcrumb）などでよく使われる矢印の形状になります（図3.23）。

しかし、これを簡単な理解しやすいコードだけで実現できるような方法

は現状のCSSには用意されていません。ほとんどの開発者は、背景画像を

使って角の切り落としを表現しています。例えば三角形を使って角を隠し

たり（背景が単色の場合のみ適用できます）、すでに角が切り落とされた

画像を背景に指定したりしています。

これらの代替案は明らかに柔軟性を欠いており、保守が困難です。

HTTPリクエストの回数やデータ量が増える問題もあります。他によい方

法はないでしょうか。

角の切り落とし

12

130

3章：形状

図3.23

角を切り落とされたボタン。矢印の形

状を通じて、ボタンの意味をアピール

できる

Next

解決策

1つの解決策は、万能の CSSグラデーションを使う方法です。ここで ...