是否可以圆形？六边形，八边形等形状？

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显示许多其他有趣的形状可以生成。