圆形可以吗？六角形，八角形等形状？

Question

我一直试图绕着六边形的角落一段时间但是我发现我的方法都没有用。你们对如何做到有什么建议吗？

Answer 1

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或画布可能会更好，除非它是一个孤立的需求。创建一堆元素来形成一个形状既非语义又乏味。

• 由于transform，border-radius和nth-child，IE 7/8根本不起作用。

• 你会注意到边界半径的大小，宽度和高度之间的简单数学关系。

• This site展示了许多其他可以生成的有趣形状。