CSSで正方形や正円を描くのは簡単ですが、レスポンシブデザインが主流になっていることもあり、サイズを可変にしたいなーってことが結構よくあります。

そんなときはpadding-topを使います。

padding-top: 100%;

この指定で、なぜか（？）外側要素の横幅100%分のpadding-topが取れます。

<div class="square">
  <div class="square-in"></div>
</div>

.square{
  width: 300px;
  /* これを%指定などで可変にする。またはJavaScriptで値を変化させる。 */
}
.square-in{
  width: 100%;
  padding-top: 100%;
  background-color: #e88;
}

サイズ可変の正円も同じ要領です。

<div class="circle">
  <div class="circle-in"></div>
</div>

.circle{
  width: 300px;
  /* これを%指定などで可変にする。またはJavaScriptで値を変化させる。 */
}
.circle-in{
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background-color: #e88;
}

簡単ですね。
知っているか知らないか程度のちょっとしたテクニックですが、知っていると少しだけデザインの幅が広がるかなーって思います。