CSS Triangles with hover effect

HTML

<div class="box">
    <div class="triSectionTop"></div>
    <div class="triSectionRight"></div>
    <div class="triSectionBottom"></div>
    <div class="triSectionLeft"></div>
</div>

CSS

.box{
    width:500px;
    height:500px;
    position:relative;
    overflow:hidden;
}
  .box > div{
    position:absolute;
    bottom:50%; left:50%;
    width:50%;  height:75%;
    transform-origin:0 100%;
    z-index:1;
}
.triSectionTop{
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    background:#41A5E8;
}
.triSectionRight{
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    background:#4EB2F5;
}
.triSectionBottom{
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
    transform:rotate(135deg);
    background:#5ABEFF;
}
.triSectionLeft{
    -webkit-transform:rotate(225deg);
    -ms-transform:rotate(225deg);
    transform:rotate(225deg);
    background:#67CBFF;
}

.box > div:hover{
    background:teal;
    box-shadow: 0 0 10px 0 #656565;
    z-index:2;
}