当div的宽度为百分比时，如何设置成为一个正方形？

正常情况下，要想设置一个正方形我们只需要设置特定的宽高即可

div {
    width: 100px;
    height: 100px;
}

若未知宽高，只知道div的宽度是百分比，怎么设置成为一个正方形呢？
此时将padding-top/padding-bottom也设置为百分比，正好和width相等，就成了一个正方形。

div {
  	width: 20%;
    padding-top: 20%; 
    background: red;
}