Как сделать не эллипс, а круг?

Question

[Skrolea]

При нажатии на меню, radial-background заливает фон. Но делает он это не совсем правильно. В виде эллипса. Как задать правильный синтаксис в анимации, чтобы получался круг?
codepen.io/TsarS/pen/ezvOWV

50% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 50%, #fff 50%, #fff 100%);
  }
  60% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 60%, #fff 60%, #fff 100%);
  }
  70% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 70%, #fff 70%, #fff 100%);
  }
  80% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 80%, #fff 80%, #fff 100%);
  }
  90% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 90%, #fff 90%, #fff 100%);
  }
  100% {
    background-image: radial-gradient(at top right, #ff4081 0%, #ff4081 100%);
  }
}

Answer 1

[Златослав Десятников]

Поглядите как реализовано тут: www.ifmo.ru
Такое меню отображается на маленьких экранах, поэтому нужно уменьшить окно.

codepen.io/anon/pen/gwkWad вот Ваш вариант с кругом.
Эллипс там потому что у .menu-wrapper высота и ширина была высотой и шириной всей страницы (а там скорее 16x9, чем 1x1).
У .menu-wrapper стоит задать ширину и высоту так, чтобы получился квадрат. То есть, можно выбрать максимальный размер (ширину или высоту) и задать размеры, равные максимальному.

Comments

[Златослав Десятников]

Skrolea, поглядите по ссылке.
По событию window.onresize нужно взять размеры окна, получить из них больший и задать эти размеры .menu-wrapper.

[Златослав Десятников]

Skrolea, если помог, отметьте ответ как решение. Спасибо!

[Skrolea]

Да отлично помогли, спасибо

Answer 2

[GreatRash]

<shape>... The default value is ellipse.