CSSでフラクタルな図形を作る。

フラクタルとは?

図形の部分と全体が自己相似なもの

フラクタル - Wikipedia

html

<div class="triangle root">
  <div class="triangle">
    <div class="triangle">
      <div class="triangle"></div>
      <div class="triangle"></div>
    </div>
    <div class="triangle">
      <div class="triangle"></div>
      <div class="triangle"></div>
    </div>
  </div>
  <div class="triangle">
    <div class="triangle">
      <div class="triangle"></div>
      <div class="triangle"></div>
    </div>
    <div class="triangle">
      <div class="triangle"></div>
      <div class="triangle"></div>
    </div>
  </div>
</div>

JavaScriptを使ってhtmlを生成する

var root = document.createElement('div');
root.className = 'triangle root';

document.body.appendChild(root);

// 引数: 階層数,要素
fractal(7,root);

function fractal(cnt,node) {
  if(cnt <= 0) return;

  var e1 = document.createElement('div');
  var e2 = document.createElement('div');

  e1.className = 'triangle';
  e2.className = 'triangle';

  node.appendChild(e1);
  node.appendChild(e2);

  fractal(cnt - 1,e1);
  fractal(cnt - 1,e2);
}

CSS

.triangle{
  position: absolute;

  border: 50px solid transparent;
  border-top: none;
  border-bottom: 100px solid currentColor;

  box-sizing: border-box;

  transition: color .5s, transform 3s;
}

.triangle.root{
  top: 25%;
  left: 50%;

  /* scale()は画面の大きさに合わせて調整 */
  transform: translateX(-50%) scale(.5);
}

.triangle.root .triangle:nth-of-type(1){
  transform-origin: center top;
  transform: translate(0,100%);

  --posX: 0;
  --angle: -60deg;
}

.triangle.root .triangle:nth-of-type(2){
  transform-origin: center top;
  transform: translate(-100%,100%);

  --posX: -100%;
  --angle: +60deg;
}

.triangle.root:hover .triangle{
  color: blue;
  transform: translate(var(--posX),100%) rotate(var(--angle));
}

完成品

実際に動作を確認したい人は下記を参照。(カーソルを乗せると...)
https://junya0215.github.io/cacao_ame/design_art/fractal_triangle/

※IE,Edgeは未対応

仕組み

三角形の底の頂点２つに三角形をつくる