Before og after problem

kan det tænktes at "height:auto;" på #hexagon kunne gøre det..?
Ellers prøv at smide din kode op, så kan vi se dine ændringer iht. originalen ;-)

Hej
Desværre ikke for højden på hexagon er bare på firkanten indeni

Her er koden

<div class="hexagon">Hexagon</div>

.hexagon {
    width: 216px;
    height: 90px;
    background: #3cbce1;
    position: relative;
}
    .hexagon:before {
        content: "";
        position: absolute;
        top: -60px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 108px solid transparent;
        border-right: 108px solid transparent;
        border-bottom: 60px solid #3cbce1;
    }
    .hexagon:after {
        content: "";
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 108px solid transparent;
        border-right: 108px solid transparent;
        border-top: 60px solid #3cbce1;
    }

Fik det løst med en container omkring
.hexagonContainer{
    width: 216px;
    height: 210px;
    padding-top: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}