CSS3 Rounded Hexagon [duplicate]


I'm trying to make a shape with CSS: a rounded hexagon (that is also elongated). I've tried thinking of a few different ways (such as a box for the body and 2 rounded triangles on the top and bottom), but I haven't come up with anything good so far. Does anyone have some ideas to create this shape in CSS? (closest I've come, no elongation: http://cdpn.io/fhpiH)


Answers:


My solution, nearly there. :)

JSFiddle Demo

Using 2 boxes for the top and bottom, and rotating them 45 degrees.

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 - His solution is slightly nicer, I should have used :before and :after