Как правильно прописать стили анимации блика в блоке с абсолютным позиционированием?

Question

[Влад]

У меня есть блок, спозиционированный абсолютно.
По сути это кнопка для загрузки файла.
У меня блик почему-то выходит за пределы обоих обёрток, несмотря на то, что в свойствах обеих я прописываю overflow: hidden;
Вот я тут набросал https://codepen.io/vlad-tarasoffka/pen/ExMzbBx
Что я делаю не так?

Comments

[Ankhena]

Ничего у вас не выходит за их пределы.
Блоки квадратные, в их области и видна полоска.

И не нужны две обертки

[Влад]

Ankhena, а! блин, заработался. Точно! border-radius на обёртку нужно и всё ))
А почему не нужно 2 две обёртки? А как вы спозиционируете кнопку с позишн релатив в блоке тоже с позишн релатив? Если убрать последнюю внешнюю обёртку и сделать кнопку абсолютной, но блик будет выходить за края, так как оба блока абсолютные.

[Ankhena]

Влад,

А как вы спозиционируете кнопку с позишн релатив в блоке тоже с позишн релатив?

Никто же вас не заставлял так писать.
В вашем сценарии: ссылка абсолютом, полоска-псевдо в ней тоже абсолютом. Всё.

Но вообще проще гридами, как-то так.
https://codepen.io/AnnaSummer/pen/NWJVygG

Осталось выяснить зачем в разметке нужны left и right.
Если в них нет полезного содержимого, то замените на псевдо.

[Влад]

Никто же вас не заставлял так писать.
В вашем сценарии: ссылка абсолютом, полоска-псевдо в ней тоже абсолютом. Всё.

Если не делать обёртки, а обойтись только тегом <a />, то псевдо-блик будет выходить за рамки основного тега.

Но вообще проще гридами, как-то так.
https://codepen.io/AnnaSummer/pen/NWJVygG

Гриды использую редко, когда без них уж совсем никак. Они вызывают у меня боль, потому что постоянно приходится освежать их в голове ))

[Влад]

Ах, да. По поводу left и right – они несут в себе полезное содержимое + вёрстка cажается на CMS. Псевдоэлементами их делать нельзя.

[Ankhena]

Влад,

Если не делать обёртки, а обойтись только тегом , то псевдо-блик будет выходить за рамки основного тега.

У меня сейчас выходит?

Если нужно, чтобы блик проходил и по синей границе, то замените border на внутреннюю тень или градиент.

[Влад]

Ankhena, А если не на гридах?

[Ankhena]

Влад, ну поменяйте ссылке позиционирование на absolute и поставьте куда надо.

Можете просто из всей разметки оставить только ссылку и проверить, что у неё всё хорошо.
Ну а потом уже позиционировать её куда угодно и как угодно.

Answer 1

[IvanU7n]

они и ограничены, квадратом, которым является и фигура центральной нахлобучки
добавление border-radius: 50%; в нужную фигуру должно помочь

Comments

[Влад]

Да, так и есть. Я тупанул жёстко )