CSS3 Rounded Hexagon

Question

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)

Are you going to be needing to put content in this? What is that supposed to look like? — Dark Falcon, Jun 24 '13 at 15:05
Think more about just making it an image because it's kind of unnecessary, just a challenge. — Damon Bauer, Jun 24 '13 at 15:05
I would strongly suggest considering using SVG for this rather than CSS. What you're asking for is difficult in CSS, and more importantly will have limitations that will make it difficult to use for some tasks. On the flip side, drawing shapes like this is dead easy using SVG graphics, and offers a lot of flexibility going forward. — Spudley, Aug 28 '13 at 14:36

score 1 · Answer 1 · answered Jun 24 '13 at 15:15

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

koningdavid · Answer 2 · 2013-06-24T15:08:48.027

0

It's not perfect, but maybe this will push you in the right direction...

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

I used 2 squares that i rotated and gave them a border on 2 sides. The edges are abit difficult but maybe with some adjustment's you can make the border's overlap better

edited Jun 24 '13 at 15:08

answered Jun 24 '13 at 15:01

koningdavid

7,903
7
35
46

score 0 · Answer 3 · answered Aug 28 '13 at 14:14

0

My Variant of CSS3 Hexagon with borders and box-shadow and border-radius on dream-notes and demo at cssdesk

answered Aug 28 '13 at 14:14

lifeart

66
4

CSS3 Rounded Hexagon

3 Answers3