body {
  background-color: #f2f2f2;
}

#container {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  background-color: white;
}

.square,
.circle,
.triangle {
  width: 100px;
  height: 100px;
  display: inline-block;
  float: left;
}

.square:hover,
.circle:hover,
.triangle:hover {
  transform: scale(1.05);
}

.circle {
  border-radius: 50%;
}

.square {
  background-color: #BCBBD0;
}

.mint {
  background-color: #ACD9CA;
}

.yellow {
  background-color: #F5E694;
}

.top-left {
  background: linear-gradient(
    135deg,
    #ACD9CA 50%,
    transparent 50%
  );
}

.bottom-right {
  background: linear-gradient(
    135deg,
    transparent 50%,
    #F5E694 50%
  );
}