http://jsfiddle.net/9BTTQ/4/

HTML

<div class="hexagon">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.hexagon {
    position: relative;    
}

.hexagon > DIV {
    position: absolute;
    top: 0;
    left: 48px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    width: 64px;
    height: 96px;
    background-color: blue;
}

.hexagon > DIV:nth-child(2) {
    -moz-transform: rotate(60deg);
    -ms-transfrom: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.hexagon > DIV:nth-child(3) {
    -moz-transform: rotate(120deg);
    -ms-transfrom: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

Заметки:

• Это, вероятно, было бы лучше сделать с помощью SVG или холста, если это не является изолированной необходимостью. Создание набора элементов для формирования формы не имеет смысла и утомительно.

• IE 7/8 вообще не будет работать из-за transform, border-radius и nth-child.

• Вы заметите простые математические отношения между размером радиуса границы, шириной и высотой.

• На этом сайте показано много других интересных форм, которые можно создать.