CSS で射線を引く

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 22:14

ただいまコメントを受けつけておりません。

CSS で射線を引く

こういう結果が欲しい

書いた HTML / CSS

<div class="_100x100"></div>
<div class="_200x100"></div>
<div class="_100x200"></div>
<div class="_100x100r"></div>
<div class="_200x100r"></div>
<div class="_100x200r"></div>

div {
  border:1px black solid;
}

._100x100 {
  width:100px;
  height:100px;
  background-image: linear-gradient(0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._200x100 {
  width:100px;
  height:200px;
  background-image: linear-gradient(1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x200 {
  width:200px;
  height:100px;
  background-image: linear-gradient(0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x100r {
  width:100px;
  height:100px;
  background-image: linear-gradient(-0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._200x100r {
  width:100px;
  height:200px;
  background-image: linear-gradient(-1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x200r {
  width:200px;
  height:100px;
  background-image: linear-gradient(-0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

書いた内容について

CSS の linear-gradient (MDN の解説)で表現している。linear-gradient は以下のように分解して読む。

0.7854rad	次からの処理を 0.7854rad (= 45°) 傾けて実施する。詳しくは MDN の angle 解説記事
transparent 49%	上から49%のところまで背景を透明とする (= 上から 0%～49% のところの背景を透明にする)
#000000 49%	上から49% のところから背景を #000000 (= 黒) とする
#000000 51%	上から51% のところまで背景を #000000 (= 黒) とする
transparent 51%	上から51%のところから背景を透明とする
transparent	最後は背景を透明とする (= 上から 51%～100% のところの背景が透明になる)

実のところ線を引いているのではなく、背景をそれっぽくしているだけである。

角度は他の方法でも指定可能だが、今回は最も簡単に計算できるラジアンで計算した。計算方法には Math.atan 関数を使う。例えば、縦200px 横100px の長方形の左上から右下にかけて線を引きたい場合は 45° よりさらに深くグラデーションを傾け、グラデーションの向きが射線と垂直となる必要がある。この時の角度は、Math.atan(200/100) で得られる値となる。サイン、コサイン、タンジェントのタンジェント、これの逆関数 (アークタンジェント) を使う。