3

I have been trying to create a Hexagonal border with pure CSS with a check mark in it.

I found Hexagon shape with a border/outline and the answer by JoshC worth pursuing. I created a fiddle an have been trying to get the shapes to behave inline. It is my intention to convert this to use em vs px after completion.

I can get two of the three to position correctly but not the third. I have not tried to get my check in the box yet. I have taken JoshC's CSS and created a base class to minimize duplicate settings. And have made progress but I have not succeeded. The basic premise is here, withe the fiddle being more involved. There is also a matter of white space below the shape.

enter image description here

✔
<div class="hex hex1"></div>
<div class="hex hex2"></div>
<div class="hex hex3"></div>

Body{font-size:24px;}
.hex:before{content:"";width:0;height:0;border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;position:absolute;top:-30px;left:0;}
.hex{margin-top:30px;margin-bottom:30px;width:104px;height:60px;background-color:#6C6;position:relative;}
.hex:after{content:"";width:0;position:absolute;bottom:-30px;border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex1:before{border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex1{background-color:#6C6;position:relative;}
.hex1:after{border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex2:before{border-bottom:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex2{background-color:red;position:relative;top:0;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);z-index:3;}
.hex2:after{border-top:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex3:before{border-bottom:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex3{background-color:blue;position:relative;top:-90px;-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);transform:scale(.8,.8);}
.hex3:after{border-top:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

Updated my fiddle based on the answer by GCyrillus! I added -webkit-transform:scale for chrome.

Community
  • 1
  • 1
Joe Johnston
  • 2,794
  • 2
  • 31
  • 54
  • Updated my fiddle based on the answer by GCyrillus! – Joe Johnston Jan 05 '14 at 23:29
  • 2
    It's kinda funny seeing a question based on an answer of mine :) I didn't use a very good approach when answering this question initially, I was in a hurry, and I have since changed my answer. It's worth taking a look at it now. http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline/19418615#19418615 There was no need to use positioning for the elements; it's best to nest the elements. There is also less coding involved too. – Josh Crozier Jan 16 '14 at 17:58

1 Answers1

1

what about : 

<div class="hex hex1">
    <div class="hex hex2">
        <div class="hex hex3">
              ✔
        </div>
    </div>
</div>

http://codepen.io/gc-nomade/pen/xEFaB

nest your element and use less relative/top : -xx ; it will stand in the flow much more easier

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This is concise. Thanks for solving for the desired result and not worrying about the div layout. This is better all around. – Joe Johnston Jan 05 '14 at 23:08