Геометрические фигуры с помощью CSS

.square {
        width: 100px;
        height: 100px;
        background: #ddd;
}

.circle {
        width: 100px;
        height: 100px;
        background: #ddd;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
}

.circle {
        width: 100px;
        height: 50px;
        background: #ddd;
        -moz-border-radius: 0 0   100px 100px;
        -webkit-border-radius: 0  0 100px 100px;
        border-radius: 0 0  100px 100px;
}

.oval {
        width: 200px;
        height: 100px;
        background: #ddd;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
}

.triangle-up {
        width: 0;
        height: 0;
        border-left: 50px outset transparent;
        border-right: 50px outset transparent;
        border-bottom: 100px solid #ddd;
}

.triangle-down {
        width: 0;
        height: 0;
        border-left: 50px outset transparent;
        border-right: 50px outset transparent;
        border-top: 100px solid #ddd;
}

.triangle-left {
        width: 0;
        height: 0;
        border-top: 50px outset transparent;
        border-right: 100px solid #ddd;
        border-bottom: 50px outset transparent;
}

.triangle-right {
        width: 0;
        height: 0;
        border-top: 50px outset transparent;
        border-left: 100px solid #ddd;
        border-bottom: 50px outset transparent;
}

.talkbubble {
   width: 120px;
   height: 80px;
   background: #ddd;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
.talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px outset transparent;
   border-right: 26px solid #ddd;
   border-bottom: 13px outset transparent;
}

.magnifying-glass
{
 font-size: 10em; /* This controls the size. */
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid #ddd;
 position: relative;
 border-radius: 0.35em;
}
.magnifying-glass::before
{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: #ddd;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}

.egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: #ddd;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}