Responsive Square, Circle with CSS only

Puneet Sharma

2 years ago

Here is a simple technique to create responsive shapes like a square, circle or rectangle (maintaining it’s aspect ratio) with the help of CSS only.

DEMO

See the Pen Responsive Square with CSS by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div class="square-wrapper">
  <div class="square-inner">
    <div class="square">
      <h1>Resopnsive Square</h1>
    </div>
  </div>
</div>

<div class="square-wrapper">
  <div class="square-inner">
    <div class="circle">
      <h1>Resopnsive Circle</h1>
    </div>
  </div>
</div>

CSS

*{box-sizing:border-box;}
.square-wrapper{max-width:250px;margin-bottom:20px;}
.square-inner{position:relative;width:100%;padding-top:100%;}
.square{border:10px solid #cecece;width:100%;height:100%;position:absolute;top:0;left:0;background:#eaeaea;text-align:center;}
.circle{border:10px solid #cecece;width:100%;height:100%;position:absolute;top:0;left:0;background:#eaeaea;text-align:center;border-radius:50%;padding-top:20%;}