Как бы вы реализовали такой блок с языками?

Question

[l55uiz]

Привет всем.
Есть блок с языками и я не могу решить каким способом правильней сделать.
Вот блок - prntscr.com/ezunbc , при наведении выезжает текст
Каждая картинка состоит из частей как на скриншоте - prntscr.com/ezuo3q ( 3 отдельных элемента - якорек(синий квадрат), сам флаг(красный квадрат), белый фон(оранжевый квадрат) ).
Как бы вы сделали такой блок?
1. Через псевдоэлементы after / before добавили бы части элементов(якорек, белый фон для текста) ?
2. Вставили бы сразу готовый флаг как на картинке и не парились.
3. Взяли бы такой флаг - prntscr.com/ezuq3j , и через transform/border пытались бы срезать угол, и также через псевдоэлементы добавить части флага.
4. Ваш вариант

Было бы замечательно, если бы пользователь мог сразу загрузить стандартный флаг другой страны и система сразу его переделала под нужный*, а не через фотошоп делать такой дизайн
Буду рад выслушать мнения

Comments

[Сергей delphinpro]

Я бы начал с третьего варианта.

[l55uiz]

Сергей: Как вы думаете, так нормально https://jsfiddle.net/seo2dojs/ ?
Однако как сделать, чтобы белый квадрат(который делает срез) был невидимым и срез был? Т.к. фоном для родительского блока будет картинка

[Сергей delphinpro]

l55uiz: Я бы сделал как-то так https://codepen.io/delphinpro/pen/bWeZJP

[l55uiz]

Сергей: благодарю, довольно таки неплохо!

[l55uiz]

Напишите ответом, я отмечу

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/bWeZJP

Answer 2

[Артур Карапетян]

2 вариант