CSS3圆角六角形

Question

我试图用CSS做一个形状：一个圆形的六角形（也是拉长的）。我尝试了几种不同的方式（例如为身体设计一个盒子，在顶部和底部放置两个圆角三角形），但到目前为止我还没有提出任何好的方法。有没有人有一些想法在CSS中创建这种形状？ （最接近我来，不伸长率：http://cdpn.io/fhpiH）

Answer 1

它并不完美，但也许这将推动你在正确的方向...

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

我用了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

Answer 3

CSS3六边形我与变异边框和框阴影和边框半径on dream-notes and demo at cssdesk