CSSだけで角をカット


画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く(ベンタープレフィックスの為だけど・・・)面倒なのでジェネレーターを作ってみた。
Css3 Corner Cutter

この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分(縦横50%)しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51%にして少しかぶせて隙間が現れ無いようにしています。

Tags: ,

トラックバック

コメントを書く