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

ホーム
BLOG
js
javascriptで四角形に斜め線を引こう

js
2019.08.27

はじめに

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

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

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

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

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

サンプルコード

HTML


<!DOCTYPE html>
<head>
  <title>javascriptでボックスに斜め線を入れよう</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
	<div class="box"><div class="line"></div></div>
    <script src="common.js"></script>
</body>
</html>

CSS


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

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',wh);
  target.css('transform','rotateZ('+kakudo+'deg)');
}

サンプルコードの実行例

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