2012-01-25

スケーラブルな三角形をCSSグラデーションで作る

ひとつ前のエントリで書いたやり方だとスケーラブルじゃないので著しく生産性に欠ける。真っ当にCSSグラデーションを書いてうまく重ねてやるとスケーラブルな三角形を作ることができるようだ。変な書き方を知っているのも良し悪しですね！

Demo: しゅるしゅる動く奴 #2

.test {
  background-color: red;
  background-image:
    linear-gradient(top right, red   0, red   50%, transparent 50%, transparent 100%),
    linear-gradient(top  left, white 0, white 50%, red         50%, red         100%)
  ;
}

これがベースでCSSグラデーションを使って斜めのグラデーションを作り重ねてやるというもの。複数の背景画像を指定した場合は先に書いた背景画像が手前に来るので、そっちではtransparentキーワードを使ってやることにより三角形になるように整えてやる。

三角形のサイズはheightとbackground-sizeプロパティーで調節する。

.test {
  height: 32px;
  background-size: 32px 32px;
}

これでひとつ前のエントリで作った三角形と同じ大きさになる。

.test {
  height: 48px;
  background-size: 48px 48px;
}

全てのサイズを大きくすれば三角形のサイズが大きくなる。小さくしたければ同じように全てのサイズを小さくするのみ。

小さくしてインジケーター風に三角形を配置する場合(デモの最後のやつ)は、bakcground-positionプロパティーも使う。

.test {
  height: 32px;
  background-position: 8px center; /* 8px = (32px - 16px) / 2 */
  background-size: 16px 16px;
}

インジケーター風のを更に応用すると吹き出しの尻尾の部分も作ることができる(デモの付録のようなやつ)。

.test {
  background-image:
    /* 尻尾になる部分 */
    linear-gradient(top left, red   0, red    50%, white 50%, white 100%),
    /* 背景色をブロックする部分 */
    linear-gradient(left,     white 0, white 100%)
  ;
  background-position:
    /* 尻尾の位置 */
    64px bottom,
    left bottom
  ;
  background-repeat: no-repeat;
  background-size:
    /* 尻尾の大きさ */
    16px 16px,
    100% 16px
  ;
}

もうちょっと工夫すればlinear-gradient()ひとつで作れそうな気がしないでもない。