是否可以圓形？六邊形，八邊形等形狀？

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顯示許多其他有趣的形狀可以生成。