Basic Geometric Shapes in pure CSS

Here are a couple of examples of how to create basic geometric shapes by using nothing but pure css.

Square #

.square {
    width: 100px;
    height: 100px;
}

Circle #

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

Oval #

.oval {
    width: 160px;
    height: 100px;
    -moz-border-radius: 80px / 50px;
    -webkit-border-radius: 80px / 50px;
    border-radius: 80px / 50px;
}

Triangle Up #

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

Triangle Down #

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

Triangle Right #

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

Triangle Top Right #

.triangle-top-right {
    background: transparent;
    width: 0;
    height: 0;
    border-top-width: 100px;
    border-top-style: solid;
    border-right: 100px solid transparent;
}

Triangle Bottom Right #

.triangle-bottom-right {
    background: transparent;
    width: 0;
    height: 0;
    border-bottom-width: 100px;
    border-bottom-style: solid;
    border-right: 100px solid transparent;
}

Triangle Left #

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

Triangle Top Left #

.triangle-top-left {
    background: transparent;
    width: 0;
    height: 0;
    border-top-width: 100px;
    border-top-style: solid;
    border-left: 100px solid transparent;
}

Triangle Bottom Left #

.triangle-bottom-left {
    background: transparent;
    width: 0;
    height: 0;
    border-bottom-width: 100px;
    border-bottom-style: solid;
    border-left: 100px solid transparent;
}

Pacman #

.pacman {
    background: transparent;
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-top-width: 50px;
    border-top-style: solid;
    border-left-width: 50px;
    border-left-style: solid;
    border-bottom-width: 50px;
    border-bottom-style: solid;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

You can combine these basic shapes with :before and :after pseudo-classes to create more elaborate shapes (like five point stars, or full blown pure css icon sets).
Make your imagination go wild.

Peace.