Поместите адаптивный кружок в правом верхнем углу экрана. ⇐ CSS

[Anonymous]

Я хочу нарисовать круг в правом верхнем углу. Мне трудно заставить его реагировать. Я пробовал этот код, но, похоже, ничего не работает.
Этот код вызывает горизонтальную прокрутку в адаптивном дизайне.
Знайте: круг должен быть разделен на четыре части; только четверть его должна отображаться в углу.

Код: Выделить всё

* {
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%);
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/784 ... the-screen