Правильная адаптация кнопки под размер шрифта?

Question

[Роман Романович]

Добрый вечер!
Как правильно сверстать кнопку, чтобы выступающий элемент с правой стороны при увеличение шрифта не съезжал с середины
вот, что получилось codepen.io/morethenlife/pen/GJNyOM

Answer 1

[Михаил Горячкин]

Сделаете так:

.talk:before{
    content:"";
    position: absolute;
    left: 100%;
    top:  50%;
    margin-top: -13px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 16px solid black;
    border-bottom: 13px solid transparent;
}

Answer 2

[Андрей Гончаров]

Возможно это имели ввиду:
codepen.io/anon/pen/xGRpWZ

Answer 3

[Роман Романович]

еще вопрос можно ли сделать градиентом эту кнопку, вот такой пример?

Comments

[twobomb]

codepen.io/anon/pen/rVWvWg

[Роман Романович]

при таком решении элемент выступающий с правой стороны остается черным, нужно, чтобы он попадал под градиент тоже