可以圆形吗?形状，如六边形、八边形

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

• IE 7/8 由于 transform、border-radius 和 nth-child 而根本无法工作。

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

• 该站点显示了可以生成的许多其他有趣的形状。