Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

フラクタルとは?

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

フラクタル - 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));
}

完成品

sample.png

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

※IE,Edgeは未対応

仕組み

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away