CSS实现响应式正方形

如何使用CSS实现响应式正方形。

html代码： <div id="mydiv"></div>

css代码：<style>

#mydiv {  

position:absolute;

border:1px solid red;

padding: 0 20% 20% 0;

  } 

</style>

通过右内边距 = 下内边距，保证 div 为正方形，百分比的设定使得 div 的宽度随网页的变化而改变。