Square Div
<div class='square-box'>
<div class='square-content'>
<h3>test</h3>
</div>
</div>
<style>
.square-box{
position: relative;
width: 50%; /* You need to specify some width */
overflow: hidden;
background: rgba(0,0,0,0.1);
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
}
</style>
Muddy Moose