BLOGホームページ制作関係csshtmljavascript

javascriptで四角形に斜め線を引こう

2019/08/27

はじめに

レスポンシブなボックスに斜め線を引きたいのですが、cssでどうやって表現したらいんですかね。

レスポンシブなボックスに斜め線を引きたいのなら、javascriptで画面ロード時とリロード時に、斜め線の長さと角度を計算して、cssで割り当てれば実装できるんじゃないかな？

なるほど・・つまり、ボックスの左上を原点にして、ボックスの斜めの長さと角度を計算して、cssで割り当てればいいんですね。

そうですね。ではサンプルを元に説明していきましょう

ボックスに斜め線を入れよう

サンプルコード

<div class="box"><div class="line"></div></div>

CSS

.box{
 width:100%;
 height:300px;//仮にheight:300pxとします。
 background:#eee;
 position:relative;
}
.line{
	position:absolute;
	top:0;
	left:0;
	height:1px;
	background:#000;
        transform-origin:left top;
}

js

$(window).on('load resize',function(){
  generate_line($('.box'),$('.line'));
});
function generate_line(obj,target){
  w=obj.outerWidth();
  h=obj.outerHeight();
  w_h=Math.sqrt(w*w + h*h);
  m_atan=Math.atan2(h,w);
  kakudo=(m_atan*360/(2*Math.PI));
  target.css('width',w_h);
  target.css('transform','rotateZ('+kakudo+'deg)');
}

サンプルコードの実行例

このようにボックスに斜線を引くことができます。
弊社のようにロード画面があるサイトでは、width:100%を指定しているとロード時に横幅がうまく取得できない場合があります。
その場合は、setTimeoutなどで画面ロード後に２秒ほど遅延処理をかけてから実装することで、うまく横幅が取得できるようになります。
この時は、load処理とresize処理は２つに分けたほうがいいですね。

HOME
BLOG
javascriptで四角形に斜め線を引こう