Make Square within Circle Responsive

by Kheema Pandey

HTML

<div>
  </div>

CSS

div
{
position: relative;
border-radius: 50%;
width: 50%;
height: auto;
padding-top: 50%;
background: #ef8913;
}

div:after {
    content: "";
    display: block;
    position:absolute;
    left:0px;
    top:0px;
    width: 50%;
    height:auto;
    margin: 20% 25%;
    padding-bottom: 50%;
    padding-top: 10%;
    background: gold;
}