I want to draw a circle in the top-right corner. I’m having a hard time making it responsive. I tried this code , but nothing seems to work.
This code is causing horizontal scrolling in the responsive design.
knowing : The circle should be quartered; only one-quarter of it should be displayed in the corner.
<code>* {
box-sizing: border-box;
}
.container {
width: 100%;
}
.circle {
width: 50vw;
height: 50vw;
max-width: 500px;
max-height: 500px;
border-radius: 50%;
position: fixed;
background-color: greenyellow;
transform: translate(100%, -50%);
}</code>
<code>* {
box-sizing: border-box;
}
.container {
width: 100%;
}
.circle {
width: 50vw;
height: 50vw;
max-width: 500px;
max-height: 500px;
border-radius: 50%;
position: fixed;
background-color: greenyellow;
transform: translate(100%, -50%);
}</code>
* {
box-sizing: border-box;
}
.container {
width: 100%;
}
.circle {
width: 50vw;
height: 50vw;
max-width: 500px;
max-height: 500px;
border-radius: 50%;
position: fixed;
background-color: greenyellow;
transform: translate(100%, -50%);
}<code><div class="container">
<div class="circle top-right"></div>
</div></code>
<code><div class="container">
<div class="circle top-right"></div>
</div></code>
<div class="container">
<div class="circle top-right"></div>
</div>
New contributor
Sally Zoughaib is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.