<button id="ignore-my-existence">Give Me A Blue Box</button>

<!--

My own set of rules to make this more interesting (and challenging):

1) Each version must be the same size aligned to the middle.
2) No extra HTML. Do it with what every page has.
3) Only body element gets the box class, so you end up with only one element to play with.
 
-->

#ignore-my-existence {
  cursor: pointer;
  line-height: 1;
  position: fixed;
  right: 1em;
  top: 1em;
}

/* some base styles so there is something to work with */
html {
  background: white;
  color: white;
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
}

body:before {
  content: 'Note: Currently only Firefox displays everything. WebKit\'s support for viewport units is bad. IE11 fails in flexbox and outline samples.';
  position: absolute;
  left: 1em;
  top: 1em;
  color: blue;
  text-shadow: 1em 1em 0 white;
  line-height: 1;
}

/* and so it begins... */

.box1:before { content: 'Relative (WebKit fails to calculate top: 20%;)'; }
.box1 {
  background: blue;
  margin: 0 20%;
  height: 60%;
  position: relative;
  top: 20%;
}

.box2:before { content: 'Absolute'; }
.box2 {
  background: blue;
  position: absolute;
  top: 20%;
  right: 20%;
  bottom: 20%;
  left: 20%;
}

.box3:before { content: 'Border + viewport units (WebKit fails: viewport units)'; }
.box3 {
  border-left: 60vw solid blue;
  height: 60vh;
  margin: 20vh 20vw;
}

.box4:before { content: 'Background-clip'; }
.box4 {
  background: blue;
  background-clip: content-box;
  height: 60%;
  padding: 20vh 20%;
}

.box5:before { content: 'Box-shadow (WebKit fails: viewport units)'; }
.box5 {
  background: blue;
  box-shadow: inset 20vw 20vh white,
    inset -20vw -20vh white;
  height: 100%;
}

.box6:before { content: 'Flexbox + pseudo child (fails on IE11)'; }
.box6 {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.box6:after {
  background: blue;
  content: '';
  height: 60%;
  width: 60%;
}

.box7:before { content: 'Inline-block pseudo child'; }
.box7 {
  line-height: 100vh;
  text-align: center;
}
.box7:after {
  background: blue;
  content: '';
  display: inline-block;
  height: 60vh;
  vertical-align: middle;
  width: 60vw;
}

.box8:before { content: 'Base64 image'; }
.box8 {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12NgYPgPAAEDAQDZqt2zAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: 20vw 20vh;
  background-size: 60vw 60vh;
  height: 100%;
}

.box9:before { content: 'Box-sizing + borders (WebKit fails: viewport units)'; }
.box9 {
  background: blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-color: white;
  border-style: solid;
  border-width: 20vh 20vw;
  height: 100%;
}

.box10:before { content: 'BONUS! Outline (does not allow % or setting X and Y individually... and WebKit fails again, viewport units. IE11 fails too.)'; }
.box10 {
  background: blue;
  outline: 20vm solid white;
  outline: 20vmin solid white;
  outline-offset: -20vm;
  outline-offset: -20vmin;
  height: 100%;
}

// http://www.a-blue-box.com/
// https://css-tricks.com/blue-box/

(function(newBox) {
  var index = 0,
      body = document.getElementsByTagName('body')[0];
  newBox.onclick = function() {
    index++;
    body.className = 'box' + index;
    newBox.innerHTML = 'Blue Box #' + index;
    index %= 10;
  };
})(document.getElementById('ignore-my-existence'));