Как сделать корректный ховер?

Question

[Antonio09]

оно не скругленной формой
а квадрат
https://jsfiddle.net/4Lsa5wtc/1/

Answer 1

[Rsa97]

Comments

[Antonio09]

Rsa97, спасибо
извиняюсь
а прозрачность для красного цвета я могу задать?
я вот задаю ( 1 строка ) и что-то не то получаю

[Antonio09]

Rsa97 , вообще для любого цвета впринципе

[Rsa97]

Antonio09, Насчёт прозрачности не уверен, поскольку у вас идёт наложение двух слоёв (before и after). Соответственно, на пересечении слоёв цвет будет более насыщенный, чем по краям.
В принципе, можно сделать такую форму с помощью SVG, наложив его фоном на прозрачный квадрат.

[Antonio09]

Rsa97, последний вопрос
а как такой изгиб можно доделать? у меня не совсем полилось как тут
игрался со значениями

[Rsa97]

Antonio09, Через CSS не знаю, я бы сделал через SVG, особенно если не нужна поддержка старых браузеров.

[Antonio09]

Rsa97, понял
не сочтите за наглость
не набросаете? или это очень долго?)

нет то нет
просто спросил))

[Rsa97]

Antonio09, Примерно так. Для смены цвета SVG надо вставлять прямо в HTML.

[Antonio09]

Rsa97, а поменять иконку я смогу ? с фейсбука на другую
с фонтавесом к примеру