Рисуем различные фигуры CSS

Первым в списке будет квадрат - разметка предельно просто, потребуется всего один блок и несколько строчек css

html:
<div class="square"></div>

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

Меняя значения размеров и цвет фона блока рисуем квадрат нужного размера

Пример того, что должно получиться:

Как из квадрата получить прямоугольник, я думаю, объяснять нет нужды, а вот нарисовать круг, к сожалению, без свойства css3 border-radius не получится.

html:
<div class="circle"></div>

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

Пример того, что должно получиться:

Немного изменив значения css свойств можем получить из круга овал.

html:
<div class="ellipse"></div>

css:
.ellipse {
    width: 200px;
    height: 100px;
    background: #cc0000;
    -moz-border-radius: 100px/50px;
    -webkit-border-radius:  100px/50px;
    border-radius:  100px/50px;
}

Пример того, что должно получиться:

К сожалению, получить круг и овал в IE 7-8 без хаков не получится. Следует так же учитывать, что чем мельче элемент, тем хуже сглаживание по краям.

Следующий подопытный в нашем списке - треугольник.

html:
<div class="triangle"></div>

css:
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;;
}

Пример того, что должно получиться:

Манипулируя значениями свойств css можно получить довольно причудливые формы треугольников. Обращаю внимание - цвет бордера должен задаваться для большей стороны. Ну и опять же, чем мельче элемент, тем хуже сглаживание по краям, но в отличии от круга и овала работает в ИЕ.