CSS3 또는 캔버스 둥근 육각형

Question

CSS가있는 도형을 만들려고합니다. 둥근 육각형 (길쭉한 모양)입니다. 나는 몇 가지 다른 방법을 생각해 보았습니다. (몸통 상자와 꼭대기와 바닥에 2 개의 둥근 삼각형이 있습니다.) 그러나 지금까지는 좋은 점이 없었습니다. 누구나 CSS에서이 모양을 만들 수있는 아이디어가 있습니까?

HTML

<div id="hexagon"></div> 

CSS

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
} 
#hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
} 
#hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
} 

Answer 1

덕분에 문제를 해결 많이.

미리보기 :

http://codepen.io/melihbuyuk/pen/evrwI

HTML

<div class="container"> 
    <div class="hexagon"> 
    <div class="box1"></div> 
    <div class="middle1"></div> 
    <div class="box2"></div> 
    </div> 
</div> 

CSS :

.container { position:relative; width:500px;} 

.middle1 { 
    border-left: 10px solid orange; 
    border-right: 9px solid orange; 
    height: 188px; 
    left: 35px; 
    position: absolute; 
    top: 59px; 
    width: 181px; 
    z-index:20; 
    border-radius:5px; 
} 
.box1 { 
    width:120px; 
    height:120px; 
    border-left: 10px solid orange; 
    border-top: 10px solid orange; 
    -moz-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -o-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
} 

.box2 { 
    width:120px; 
    height:120px; 
    border-bottom: 10px solid orange; 
    border-right: 10px solid orange; 
    -webkit-border-radius: 20px; 
    margin-top:50px; 
    border-radius: 20px; 
    -moz-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -o-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
}