#square {
  width: 100px;
  height: 100px;
  background-color: red;
background: radial-gradient(pink, yellow, orange);
text-align: center;
text-shadow: 5px 5px 1px blue;}
#polygon{
  width: 300px;
  height: 100px;
  background-color: red;
margin-left: 80px;
  transform: skewx(40deg);
 box-shadow: 15px 45px 5px black;}
#diamond {
  width: 100px;
  height: 100px;
  transform: rotate(135deg);
  background:linear-gradient(0.3755turn, #3f87a6, #ebf8e1, #f69d3c);
margin-left: 80px;}
#square-img{
  width: 500px;
  height: 500px;
  background-image: url(https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); 
background-size:contain;
background-repeat: no-repeat;
background-position: 20% 0%;
transform: skewy(150deg);}