CSS Shapes

Creating a hexagon from CSS only

by Cyberjetx

HTML

âś”
<div class="hex hex1"></div>
<div class="hex hex2"></div>
<div class="hex hex3"></div>
<table class="headspread">
    <tr>
        <td class="headleft">
            <div class="hex hex1"></div>
            <div class="hex hex2"></div>
            <div class="hex hex3"></div>text-align: left</td>
        <td class="headcenter">some text
            <div class="hex hex1"></div>
            <div class="hex hex2"></div>
            <div class="hex hex3"></div>
        </td>
        <td class="headright">
            <div class="hex hex1"></div>
            <div class="hex hex2"></div>
            <div class="hex hex3"></div>text-align: right</td>
    </tr>
</table>

CSS

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

/* some minutia to make sure my changes work in differing conditions */
.headspread{border:thin solid silver;width:80%;margin-left:auto;margin-right:auto;}
.headleft{text-align:left;width:150px;white-space:nowrap;border:thin solid green;}
.headcenter{text-align:center;white-space:nowrap;border:thin solid green;vertical-align:middle;}
.headright{text-align:right;width:200px;white-space:nowrap;border:thin solid green;}