#serpinski-triangle {
  background: #EEEE00;
  height: 300px !important;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 300px !important;
}
#serpinski-triangle div {
  height: 50%;
  float: left;
  overflow: hidden;
  position: relative;
  width: 50%;
}
#serpinski-triangle:before, #serpinski-triangle div:before {
  background: black;
  bottom: 0;
  content:"";
  display: block;
  height: 141.421356237%;
  left: 0;
  position: absolute;
  width: 70.710678118%;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 0 100%;
}
    <div id="serpinski">
      <div>
        <div>{ ... }</div> <!--               -->
        <div>{ ... }</div> <!-- One unit cell -->
        <div>{ ... }</div> <!--               -->
      </div>
    </div>

A pure css Serpinski Triangle I made. The each unit cell has three divs, and to extend the fractal one level you just add three more divs in each empty div. Each div is width: 50%; height: 50%; of the parent div. The divs are then floated, making a square with three squares inside of it, and the forth quadrant is empty.

Normally pure css trangles are made using elements with width: 0; height: 0 and a border with asymetrick coloring. If you are unfamiliar with this technique, you can read more at CSS Tricks. However, because borders can’t be percentages, this doesn’t work with fractals. Instead we use a square, rotated pseudo elements (the div:before in the above css). The parent of the pseudo element is overflow hidden. Here’s the full CSS. Feel free to email me if you want to know more. I may post more on this later.



Published

12 March 2014

Tags