#square
{
  width: 50px;
  height: 50px;
  background: red;
}

#rectangle
{
  width:100px;
  height:50px;
  background:Green;
}

#diamond
{
  width:50px;
  height: 50px;
  background:orange;
  transform: rotate(45deg);
}

#circle
{
  width:100px;
  height:100px;
  background:violet;
  border-radius:50%;
}

#oval
{
  width:100px;
  height:60px;
  background:blue;
  border-radius:50%;
}

#triangle-up
{
  width:0;
  height:0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid aquamarine;
}

#triangle-right
{
  width:0;
  height:0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid grey;
}

#trapezoid
{
 border-bottom: 25px solid #299999;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width:60px;
  height:0px;
}

#cut-diamond {
      border-style: solid;
      border-color: transparent transparent green transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;
      box-sizing: content-box;
      position: relative;
      margin: 20px 0 50px 0;
    }
    #cut-diamond:after {
      content: "";
      position: absolute;
      top: 25px;
      left: -25px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: green transparent transparent transparent;
      border-width: 70px 50px 0 50px;
    }
  
  #heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: aquamarine;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

   #infinity {
      position: relative;
      width: 212px;
      height: 100px;
      box-sizing: content-box;
    }
    #infinity:before,
    #infinity:after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 20px solid blue;
      border-radius: 50px 50px 0 50px;
      transform: rotate(-45deg);
    }
    #infinity:after {
      left: auto;
      right: 0;
      border-radius: 50px 50px 50px 0;
      transform: rotate(45deg);
    }


    #egg {
      display: block;
      width: 126px;
      height: 180px;
      background-color: violet;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }