Bézier Curve

by Julien Etienne

HTML

<div class="graph">
  <div class='diagonal'></div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
    <span></span>
</div>

CSS

.graph {
  background: rgb(255, 230, 230);
  width: 400px;
  height: 400px;
  border-left: 1px dashed black;
  border-bottom: 1px dashed black;
  position: relative;
}

.diagonal {
  width: 565px;
  height: 0;
  position: absolute;
  bottom: 0;
  border-top: 1px dashed black;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
span {
  width:10%;
  height:10%;
  background: red;
  position: relative;
  float: left;
}

JavaScript

var graph = document.getElementsByClassName('graph')[0];

var spans = [].splice.call(graph.getElementsByTagName('span'));

spans.forEach(function(span){
	span.style.top = '300px';
});