Честно говоря, вы до смешного не задумывались над ответом на эту проблему, но в некоторой степени это связано не с вашим кодом, а с тем фактом, что оригинал является результатом катастрофы мошенничества, известной как W3Schools, в результате веб-гниения. Как я уже говорил на протяжении двух десятилетий, единственное, чему W3Fools должен кого-то научить, - это тому, как не использовать HTML или CSS.
Есть способ попроще, и для него калькулятор не нужен.
Я переделал этот ответ как полную и правильную статью:
Масштабируемые« стилизованные флажки с использованием только CSS. Он называется EM. Используйте Em!
В ответ на статью Омара Шараки« От статических значений к динамическим значениям CSS о масштабировании примера мусора с… medium.com»
Немного изменена методология, так что радиус границы динамически вычисляется с помощью переключателей ширины / высоты и ширины границы с использованием переменных CSS3.
