Треугольники (CSS), которые растут вместе с внутренним текстом? ⇐ CSS

[Anonymous]

Итак, мой клиент заинтересован в создании эффекта наведения для подписей/ссылок, как показано в макете ниже:
[img]https: //i.stack.imgur.com/ZdUhT.jpg[/img]

Проблема треугольников CSS (насколько я знаю) заключается в том, что они не растут вместе с текстом. Хотя это отличный декоративный элемент для вечнозеленых (неменяющихся) элементов, я не думаю, что он лучше всего подходит для этой цели. Мой клиент будет очень ограничен в количестве символов, которые можно поместить в него, и это количество символов изменится. Кроме того, изображения в галерее имеют каменный макет, что еще больше усложняет ситуацию из-за фиксированного внешнего вида треугольника.
Вот что у меня пока есть:

Код: Выделить всё

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 173px 200px;
border-color: transparent transparent #362FFF transparent;
bottom: 0;
right: 0;
position: relative;
}

.triangle p {
text-align: center;
white-space: pre-wrap;
transform: none;
text-align: center;
top: 75px;
left: -100px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
font-size: 18px;
}

Кто-нибудь знает способ создания треугольников с возможностью увеличения высоты или изменения формы вместе с текстом?
Спасибо!>

Подробнее здесь: https://stackoverflow.com/questions/781 ... nside-text