jquery - CSS3 或 Canvas 圆角六边形

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);
}