Как можно реализовать по нажатию на кнопку изогнутый span или div подобным образом?

Question

[cannonfox]

высота должна быть 20 и ширина 45

Answer 1

[Максим]

Работает при наведении

Answer 2

[andand44]

Можно так, но нужно поиграть с цифрами
https://jsfiddle.net/eyuo47Lp/ или так https://jsfiddle.net/3xo5btuk/

Answer 3

[Максим Девда]

Навскидку вариант:

Делаете 2 треугольника (один белый, второй с цветом рамки) через css и псевдокласcы :after и :before. Позиционируете их абсолютно, белому z-index больше красного. . Добавляете при клике новый класс .active например. Все )

Ссылка на треугольники:
https://css-tricks.com/snippets/css/css-triangle/