A Pen by Corey Smith.

Checker-Divider.markdown

Checker Divider

using for local business website, inspiration from Lea Verou

A Pen by Corey Smith on CodePen.

License.

index.html

<div class="checker"></div>

style.scss

@import "bourbon";
body {
  min-height: 100%;
  background: #dcdcdc;
}

$border-width: 20px;
$gradient-calc: percentage(($border-width/1px)/10);

.checker {
  position: relative;
  width: 100%;
  height: $border-width;
  
  &:nth-of-type(2n) {
    //left: $border-width * 3;
  }
}

.checker:before, .checker:after {
  @include background(linear-gradient(to left, white 50%, black 50%, black 100%));
  content: '';
  position: absolute;
  top: 0;
  left: -$gradient-calc;
  width: ($gradient-calc*2) + 100;
  height: $border-width/2;
  background-size: $border-width $border-width;
  background-repeat: repeat-x;
}

.checker:before {
  //box-shadow: 0 1px 1px rgba(black, .3);
}

.checker:after {
  top: $border-width / 2;
  margin-left: $border-width / 2;
  //left: $border-width * 3;
  //box-shadow: 0 1px 1px rgba(white, .3);
}