CSS3圆形Hexagon

Question

我正在尝试使用CSS制作一个形状：圆形六边形（也是细长的）。我已经尝试过几种不同的方法（例如一个身体的盒子和顶部和底部的两个圆角三角形），但到目前为止我还没有想出任何好的东西。有没有人有想法在CSS中创建这个形状？ （我最接近，没有伸长：http://cdpn.io/fhpiH）

Answer 1

我的解决方案，几乎就在那里。 ：）

<强> 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 2

这并不完美，但也许这会让你朝着正确的方向前进......

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

我使用了2个方格，我旋转并在两侧给它们border。边缘很难实现，但是通过一些调整可以使边框重叠更好

Answer 3

我的CSS3 Hexagon的变体，带有边框和box-shadow和border-radius on dream-notes  and demo at cssdesk