ボーダーで三角形などを作るときには transparent ではなく rgba() で

Category : CSS

よく CSS のボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。

たとえば、こういう HTML と CSS で三角形を作るとしましょう。よく見るタイプだと思います。

<div class="test1"></div>
.test1 {
  width: 0;
  height: 0;
  border-width: 0 200px 200px 0;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
}

こっちでもいいです。好みで。

.test1 {
  ...
  border-color: transparent;
  border-right-color: #eee;
}

見えづらいかもしれませんが、直角三角形になっていますね。
ただし、Firefox で見ると斜めのラインが濃くなっていることがあります。
こちらでは Windows Firefox 15 と Aurora 17.0a2 (2012-10-01) で確認済みです。ただ、Mac Firefox 15 では出ないようです。
Windows でも発生しないことがあるので、もしかしたらハードウェアも影響しているかもしれません。

Firefox だと三角形の斜めの部分の縁が濃くなっている

原因はボーダーのアンチエイリアスにあるようです。
ボーダーの斜めのラインのアンチエイリアスにより、transparent と指定したボーダー色が混ざってしまって色が変わってしまう、ということです。

transparent は透明な黒 (rgba(0, 0, 0, 0)) として扱われるので、色が濃くなってしまいます。
先ほどのリンク先にもありますが、解決策は transparent ではなく、透明なボーダー色を指定することです。これなら色が混ざっても見た目には問題ありません。

rgba() とか使ったら IE8 で上手く表示されないのでは?」という問題がありますが、それは指定を上書きすることで対応できます。

先ほどの例で試してみましょう。

.test1 {
  width: 0;
  height: 0;
  border-width: 0 200px 200px 0;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
  border-right-color: rgba(238, 238, 238, 0); /* 追加した部分 */
}

上手くできました。
rgba() じゃなくて hsla() でもいいと思います。

というわけなので、ボーダーで三角形作ったりするときには一応この辺もチェックしてみた方がいいですよ、ということでした。
それと、@GeckoTang さんが IE7 にも対応したものを作っていましたので、合わせてご覧ください。
(SCSS で書かれています)


まあボーダーで三角形を作らないといけない機会がどれくらいあるのかとか、画像でいいじゃんとかそういうのもありますが、知っていて困ることでもないので……。

Trackbacks & Pingbacks

Leave a Reply