Create perfect square using CSS percentage

This is a quick tip of create a perfect square with CSS. The padding is the property which accepts value in percentage, the percentage is relative to the width of the document. It means the percentage of width and setting the padding to the same value with height 0 will return a perfect square. Check the code below:

.box{
padding-bottom:30%;
width:30%;
height:0;
display:block;
}