• js

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

はじめに

レスポンシブなボックスに斜め線を引きたいのですが、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などで画面ロード後に2秒ほど遅延処理をかけてから実装することで、うまく横幅が取得できるようになります。
この時は、load処理とresize処理は2つに分けたほうがいいですね。

関連記事

  1. javascriptを使って要素の横幅を取得してみよう

  2. javascriptを使って特定の要素に特定のクラスがあるかを調べよう…

  3. アコーディオンを作ってみよう

  4. javascriptでタブを自作しよう

  5. javascript講座 – ログを出力する –…

  6. 特定のIDの複数のクラスをjsで取得しよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930