Как сверстать стрелочку?

Question

[testtoster]

Как правильно сверстать данный элемент?

Answer 1

[Natalia ivanova]

Можно так:
https://codepen.io/Natalia_ai_ivanova/pen/RwNEYVK

Answer 2

[Антон]

https://codepen.io/GioAc96/pen/QarEQM

Answer 3

[Петр]

Применить SVG

Comments

[testtoster]

на css тоже такое вроде бы сверстать можно

[Максим]

testtoster, ну разумеется можно - сделать div квадратный и так же border 4px и скрыть нужные - скажем border-top и border-left трансвормировать на 45гр и всё

Answer 4

[Вадим]

Да вариантов хоть отбавляй. Зависит от вашей фантазии.

Можно сделать из двух псевдоэлементов ::before, ::after, Задав правильное позиционирование, transform-rotate и border (или width\height + background-color).

Можно из одного (псевдо)элемента. Делайте квадратик, задаёте границу с двух смежных сторон, а не полную - профит. В этом случае может не получиться полного красивого скругления всех углов стрелочки.

Можно жёстко задать размер блока, скрыть overflow, запихнуть внутрь блока букву "К" и подобрать соответствующий размер шрифта, чтобы осталась видна только такая вот "стрелочка" :-D

SVG\Canvas не предлагаю т.к. тэг CSS :-)