CSS Checkerboards Using Linear Gradients

  .triangle-checkerboard {
    background: #eee;
    background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
    background-size: 30px 30px;
  }
  

  .checkerboard {
    background: #eee;
    background-image:
        linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, #bbb 0),
        linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, #bbb 0);
    background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
    background-size: 30px 30px;
  }

  

---