2012-01-29

CSSで画像を三角に切り抜く

要素の一部を切り抜くclipプロパティー(CSS3ではcropにリネームされる予定)で使える関数にtri()とか欲しい所だけどないものはないし、追加されるとも思えないのでどうにかする話。空前のCSSで三角にするブーム。丸いサムネイルとかアキマシタヨネー。

Demo: Cut a Triangle from an Image with CSS

簡単そうなのでborderプロパティーを使ってやった。コンテナであるfigure要素に::before擬似要素で透過する三角をまず作る。CSSで作る吹き出しの逆バージョンと考えると割りと近いかも。

.test::before {
  border-top: 0;
  border-right: 160px solid white;
  border-bottom: 240px solid transparent;
  border-left: 160px solid white;
  content: "";
}

このままでは画像の横に見えない三角が置かれるだけなので、positionプロパティーを組み合わせて重なるようにしてやる。

.test {
  position: relative;
}

.test::before {
  position: absolute;
}

だいたいのブラウザで意図した通りに表示される(と思う)。

border-bottomプロパティーの色をtransparentではなくうっすらと色がつく透過色にするとか、transformプロパティーで少し回転させたりとか、ソリッドな色の代わりにborder-imageプロパティーを使ってちょっとラフな線にしたりするとか、もうちょっと見栄えを良くする方法はいくつかあるんじゃないかと思う。WebKitでのtransformプロパティーがborderプロパティーと相性が悪かったりするし、だいたいのブラウザでborder-imageプロパティーは魔窟な感じだったりするので、実用性のあるものを作るのはかなり大変そうですけどね。