三角形をランダムで描画する~Javascript~

MAGAZINE

: Twitter

: Facebook

KEYWORDS: Javascript webpack

三角形をランダムで描画する~Javascript~

WEB

Javascriptを使用して、背景に三角形を描画するscriptです。

今回の目的は背景に三角形を描画すること。
ただし、大きさ・向きはランダムであることが前提です。

サンプルHTML

<div id="elem">
  <div>内容</div>
</div>

サンプルCSS

#elem{
  position: relative;
  z-index: 2;
}

サンプルJS

三角形を作る関数

function createTri(n, max, min) {
  var tri = document.createElement("div") //作られる三角形の要素
  var elem = document.getElementById('elem') // 三角形の作られるエリア
  tri.className = "tri";
  elem.style.position = "relative"
  elem.style.overflow = "hidden"
  tri.style.position = "absolute";
  tri.style.zIndex = "1";

  for (var i = 0; i < n; i++) {
    var triClone = tri.cloneNode();

    //最大値、最小値を考慮した三角形のサイズにする
    var size = Math.random() * (max - min) + min;

    //位置をランダムに
    triClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
    triClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
    tri.style.borderTop = " " + max * Math.random() + "px solid #fff";
    tri.style.borderLeft = " " + max * Math.random() + "px solid transparent";
    triClone.style.transform = "rotate(" + size * Math.random() + "deg)";
    elem.appendChild(triClone);
  };
}

上記関数を実行

//三角形の個数を50個、三角形の最大値40px、最小値20px
createTri(50, 40, 20);てください

実行後の画像

今回はエラーも無く、問題なく作成できました。
webpackを使用してコンパイルしてるので、書き方はESが混じってます。