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.
* {
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%);
}
<div class="container">
<div class="circle top-right"></div>
</div>
Make it simple:
.circle {
position: fixed;
top: 0;
right: 0;
width: min(25vw,500px); /* the size */
background: red; /* the color */
aspect-ratio: 1;
border-bottom-left-radius: 100%;
}
<div class="circle top-right"></div>