Как сделать эффект «флажка»?

Question

[furashcka]

1)

2)

Здравствуйте уважаемые web мастера! Имеется красный "флажок" (рис 1,2) который может содержать любое количество букв (не превышая ширину диагонали изображения), вопрос как прижимать "флажок" максимально к верхнему\левому углу при условии чтобы слово можно без проблем прочитать?

Comments

[OVK2015]

width: 100px;
height: 20px;
background-color: white;
color: coral;
position: absolute;
top: 14px;
left: -24px;
transform: rotate(-45deg);
text-align: center;

Answer 1

[Сергей delphinpro]

Ну вот, как-то так
https://jsfiddle.net/DelphinPRO/3Lp67w6s/

Comments

[Fetur]

Годно, мне понравилось, жаль, что это пока что влажные мечты, отрисовка шрифтов просто уродская в таком положении. Пока только картинки.

Answer 2

[Давид Манжула]

Я придумал, но не могу сказать словами на русском.
Пишите в вк @ da411d

Comments

[Fetur]

Ты втираешь какую-то дичь.