$niceBlue: #5CACEE;
$shadow: black;

.boxy {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height:300px;
  border:2px solid #bbb;
  background-color: #ebebeb;
}

.badge1,.badge2,.badge3 {
  position: absolute;
  background-color: $niceBlue;
  text-align:center;
  line-height:50px;
  width:100px;
  height:50px;
}

.badge1:after {
  content:"";
  position: absolute;
  top: 0px;
  transform: skew(20deg);
  right:-15px;
  width:30px;
  height:inherit;
  background-color:$niceBlue;
}

.badge2:after {
  content:"";
  position: absolute;
  top: 0px;
  transform: skew(20deg);
  right:-15px;
  width:30px;
  height:inherit;
  background-color:$niceBlue;
}
.badge2:before {
  content:"";
  position: absolute;
  top: 7px;
  transform: skewY(30deg);
  left:0px;
  width:20px;
  height:inherit;
  background-color:$shadow;
  z-index:-10;
}

.badge3:after {
  content:"";
  position: absolute;
  top: 0px;
  transform: skew(20deg);
  right:-15px;
  width:30px;
  height:inherit;
  background-color:$niceBlue;
  border-radius: 0 4px 4px 0;
}
.badge3:before {
  content:"";
  position: absolute;
  top: 7px;
  transform: skewY(30deg);
  left:0px;
  width:20px;
  height:inherit;
  background-color:$shadow;
  z-index:-10;
}

.badge1 {
  top: 30px;
  left: 0px;
}

.badge2 {
  top: 100px;
  left: -6px;
}

.badge3 {
  top: 170px;
  left: -8px;
}