title: CSS3 Rounded Hexagon
body: <p>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: <a href="http://cdpn.io/fhpiH" rel="nofollow noreferrer">http://cdpn.io/fhpiH</a>)</p>
  
  <p><a href="https://imgur.com/nWhMfhr" rel="nofollow noreferrer"><img src="https://i.imgur.com/nWhMfhr.jpg" title="Hosted by imgur.com" /></a></p>