CSS3圆角六边形[重复]答案

【问题标题】：CSS3 Rounded Hexagon [duplicate]CSS3圆角六边形[重复]
【发布时间】：2014-12-02 18:30:22
【问题描述】：

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

【问题讨论】：

您是否需要在其中添加内容？那应该是什么样子？
哎呀。是的。里面会有内容。
多考虑将其制作成图片，因为这有点不必要，只是一个挑战。
我强烈建议考虑使用 SVG 而不是 CSS。你所要求的在 CSS 中很困难，更重要的是会有一些限制，使其难以用于某些任务。另一方面，使用 SVG 图形绘制这样的形状非常容易，并且提供了很大的灵活性。

标签： css shape css-shapes

【解决方案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

【讨论】：

【解决方案2】：

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

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

我使用了 2 个旋转的正方形，并在 2 边给它们一个 border。边缘有点困难，但也许通过一些调整可以使边框的重叠更好

【讨论】：

【解决方案3】：

我的 CSS3 六边形变体，带有边框、框阴影和边框半径 on dream-notes and demo at cssdesk

【讨论】：