I am trying to create a design with a yellow background and a circle that has a grey border. I want everything outside the circle to be white, while the inside of the circle should reveal the yellow background from the div below it.
I am looking for a CSS solution without resorting to replacing the css circle with an image.
Structure:
<div id="background">
<div class="circle">
</div>
</div>
CSS Style:
#background{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#ffff99;
white-space: nowrap;
text-align:center;
}
#background:before{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.circle{
width:100px;
height:100px;
position:relative;
border-radius:50%;
border:2px solid #999;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
Here is the jsFiddle link to test it out.
Expected outcome: https://i.sstatic.net/Qafu4.png
Progress Update
I have implemented a radial gradient but need to maintain the circular shape while ensuring the div height and width remain at 100%.
Check out this updated jsFiddle
Update 2
I have achieved the desired effect, however, I am open to suggestions on whether there is a more efficient way to achieve this.