CSSだけで角をカット
画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く(ベンタープレフィックスの為だけど・・・)面倒なのでジェネレーターを作ってみた。
「Css3 Corner Cutter」
この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分(縦横50%)しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51%にして少しかぶせて隙間が現れ無いようにしています。