.caja {
    width: 80px;
    height: 40px;
    background-color: #66d4ff;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
    }
    .caja:hover{
    width: 100px;
    }
    #rombo {
        width: 100px;
        height: 100px;
        background-color: #ff66bd;
        transform: rotate(45deg);
        transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
      }
      #rombo:hover{
        width:50px ;height: 40px;
      }
    
    #circulo {
      width: 40px;
      height: 50px;
      background-color: #ed2233;
      border-radius: 50%;

    }
    #circulo:hover{ background-color: bisque;
    }
    #trianguloAb {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid rgb(0, 0, 0);
    }
        #trianguloAb:hover{ 
            
                width: 100px;
                height: 100px;
                background-color: #66abff;
                transform: rotate(45deg);
              }