Shapes and Colors

Mouseover a shape to display code. All shapes are css generated.
Use
<div id=shape>&nbsp;</div>
to view shapes
Select Full Screen for best view

     #heart {
      position: relative;
      width: 100px;height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;top: 0;
      width: 50px;height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;}

    #cone {
      width: 0;
      height: 0;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 100px solid green;
      border-radius: 50%;
      position:absolute;left:450px;top:200px;
    }

    #moon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 yellow;
      position:absolute;left:480px;top:474px;
    }

    #diamond {
      width: 0;height: 0;
      border: 50px solid transparent;
      border-bottom-color: blue;
      position: relative;
      top: -50px;
   position:absolute;left:780px;top:434px;
    }
    #diamond:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 50px;
      width: 0;height: 0;
      border: 50px solid transparent;
      border-top-color: blue;
    }

#oval {
  width: 200px;
  height: 100px;
  border-radius:100px / 50px;
}

   #circle {
     width: 80px;
     height: 80px;
     background: blue;
     border-radius: 50%;
}

    #square {
      width: 90px;
      height: 90px;
      background: green;
}

    #triangle {
      width: 0; height: 0;
      border-left: 35px solid transparent;
      border-right: 35px solid transparent;
      border-bottom: 60px solid yellow;
}