Странное поведение border-radius. Почему просвечивает фон?

Question

[Лев Александров]

Сделал такую кнопку: https://codepen.io/h3ckphy/pen/WNXoXWd
У элемента .btn-icon__dot1 увеличиваю scale до больших значений, чтобы полностью перекрыть всю кнопку.

Проблема в том, что на темном фоне кнопка будто бы полностью не перекрывается и на углах виден просвет фонового цвета кнопки. Я пробовал делать не через scale, а с width и height, но это не помогло. На светлом фоне ничего не заметно, также проблемы нет, если убрать border-radius. Если смотреть через консоль, то видно, что прописанный scale более чем достаточен. Как решить данную проблему?

Answer 1

[Елена]

Никак. Все дело в том, что пиксели квадратные

Comments

[Лев Александров]

хах. Даже не знаю, как это сказать заказчику

[Елена]

Лев Александров, можешь менять цвет при hover на тот, которым перекрываешь. Только так

[Лев Александров]

Елена, хорошая идея, правда надо подобрать подходящие значения задержки. Если что, сделаю так. Спасибо!

Answer 2

[true]

не должно быть такого
у тебя наложение двух фонов происходит поэтому возникают такие дефекты

сделай цвета наоборот
сначала темно синий и потом голубой