둥근 모양이 가능합니까? 육각형, 팔각형 등의 모양?

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 또는 캔버스와 함께 할 것 ted need. 모양을 형성하기 위해 많은 수의 요소를 만드는 것은 의미가 없으며 지루합니다.

• transform, border-radius 및 nth-child으로 인해 IE 7/8이 전혀 작동하지 않습니다.

• 테두리 반지름의 크기, 너비 및 높이 사이의 간단한 수학적 관계를 알 수 있습니다.

• This site은 생성 될 수있는 많은 다른 흥미로운 모양을 보여줍니다. [당신이 시도 무엇?]