.outer {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  margin-top: -200px;
  margin-left: -200px;
  background: #E0F7FA;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.stripes {
  position: relative;
  top: -67px;
  left: -100px;
  width: 600px;
  transform: rotate(45deg);
}
.stripes .stripe {
  background: #00B8D4;
  width: 600px;
  height: 3px;
  margin-bottom: 16px;
}

.center {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 70px;
  left: 70px;
  background: #00B8D4;
  border-radius: 3px;
  box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.3);
}

.polygon {
  position: absolute;
  height: 140px;
  width: 160px;
  top: 60px;
  left: 50px;
}
.polygon .light {
  fill: #E0F7FA;
  transition: all 0.5s ease-in-out;
}
.polygon .middle {
  fill: #B2EBF2;
  transition: all 0.5s ease-in-out;
}
.polygon .dark {
  fill: #80DEEA;
  transition: all 0.5s ease-in-out;
}
.polygon:hover .light {
  fill: #80DEEA;
}
.polygon:hover .middle {
  fill: #E0F7FA;
}
.polygon:hover .dark {
  fill: #B2EBF2;
}