CSS Hexagon

hexagon.html

<style>
.hexagon {
    height: 150px; 
    overflow: hidden; 
    transform: rotate(120deg); 
    width: 300px;

    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
}

.hexagon-wrapper {
    height: 100%;
    overflow: hidden;
    transform: rotate(-60deg);
    width: 100%;

    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
}

.hexagon-inside {
    height: 100%;
    transform: rotate(-60deg);    
    width: 100%;

    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
}

.bg-orange { background-color: #e67e22; }

</style>

<div class="hexagon">
    <div class="hexagon-wrapper">
        <div class="hexagon-inside bg-orange">
        </div>
    </div>
</div>