CSS3 둥근 육각형

Question

나는 둥근 육각형 (또한 길쭉한 모양)으로 CSS로 도형을 만들려고합니다. 나는 몇 가지 다른 방법을 생각해 보았습니다. (몸통 상자와 꼭대기와 바닥에 2 개의 둥근 삼각형이 있습니다.) 그러나 지금까지는 좋은 점이 없었습니다. 누구나 CSS에서이 모양을 만들 수있는 아이디어가 있습니까? (제가 왔어요 가까운, 더 신장 : http://cdpn.io/fhpiH)

Answer 1

그것은 완벽 하진,하지만 어쩌면이 올바른 방향으로 밀어 것입니다 ...

http://jsfiddle.net/3b7j5/1/

나는 2를 사용하지 나는 회전하여 그들에게 2면에 border을주었습니다. 가장자리가 까다 롭지 만 어쩌면 약간의 조정으로 국경의 겹침을 더 잘 만들 수 있습니다.

Answer 2

제 해결책은 거의 없습니다. :)

JSFiddle Demo

은 상단과 하단에 2 상자를 사용하여, 그들에게 45도 회전.

HTML

<div class="container"> 
    <div class="box"></div> 
    <div class="middle"></div> 
    <div class="box"></div> 
</div> 

CSS

.container { 
    position:relative; 
    width:500px; 
} 
.middle { 
    border-left: 10px solid orange; 
    border-right: 10px solid orange; 
    height: 228px; 
    left: 137px; 
    position: absolute; 
    top: 132px; 
    width: 266px; 
    background:#fff; 
    z-index:20; 
} 
.box { 
    width:200px; 
    height:200px; 
    background:#fff; 
    border:10px solid orange; 
    -webkit-border-radius: 30px; 
    border-radius: 30px; 
    -moz-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg); 
    -webkit-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg); 
    -o-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg); 
    -ms-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg); 
    transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg); 
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3); 
} 

는 @koningdavid - 그의 해결책은 약간 좋네요, 나는 :before 및 :after을 사용해야

와 CSS3 육각의

Answer 3

내 변형 테두리 및 상자 그림자 및 테두리 반경 on dream-notes and demo at cssdesk