2012年3月5日月曜日

css3で斜め罫線を引く

background-imageプロパティにlinear-gradient関数で生成した画像を設定することで斜め罫線を引くことが出来る．単なる色分けならborderを利用したテクニックもあるが，対角線を引くだけであれば，こちらの方法のほうが直感的ではある．（簡単というわけではない）
素直にsvgかcanvas使いましょう．
→追記：環境が許せばsvgを使ったほうが簡単です．

こんな感じ．



background-image: -moz-linear-gradient(
45deg, transparent 141px,black 141px, black 142px, transparent 142px);
background-image: -webkit-linear-gradient(
45deg, transparent 141px,black 141px, black 142px, transparent 142px);
background-image: -o-linear-gradient(
45deg, transparent 141px,black 141px, black 142px, transparent 142px);
background-image: -ms-linear-gradient(
45deg, transparent 141px,black 141px, black 142px, transparent 142px);
background-image: linear-gradient(
45deg, transparent 141px,black 141px, black 142px, transparent 142px);
border: solid 1px black; height: 200px; width: 200px;

対角線の角度，長さを計算しておき，色のgradient幅を0に抑えることで対角線を表現する．上記の例ではpx指定しているが，％指定（50%〜51%）でも同様に扱える．対角線の長さを計算せずに済むが，要素の大きさに従って罫線が広がってしまうので使い分けると良い．
詳しくはlinear-gradientの仕様を参照のこと．グラディエントの仕組みが分かりやすく説明されている．
（もっとも肝心要の角度の算出が面倒なので，罫線用の画像を用意しておくほうが簡単ではある．）

※firefoxであれば，element関数を使って背景用の要素を生成しておき，他の要素に流用することで面倒な罫線の角度計算を省くこともできる．ただし背景画像の拡大により斜め罫線が汚くなってしまう点に注意．
下の例ではdiv要素templateに斜め罫線を引き，targetの背景に設定している．background-sizeにより，背景画像が要素の大きさに引き伸ばされ，斜め罫線が対角線上に正しく表示される．

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <style type="text/css">
#template{
 width:100px;
 height:100px;
 background:-moz-linear-gradient(
  45deg, transparent 70px, black 70px, black 71px, transparent 71px);
 background-repeat:no-repeat;
}
#target{
 width:500px;
 height:300px;
 background-image:-moz-element(#template);
 background-size:100% 100%;
 border:solid 1px black;
}
 </style>
 </head>
 <body>
  <div id="template"></div>
  <div id="target"></div>
 </body>
</html>
時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)