Как сверстать отрезок бекграунда кнопки?

Question

[Danya Wyse]

Как сверстать этот отрезок ? Псевдоэлементом или как то по другому?

Comments

[Вадим]

Зависит от того, предполагается ли для этой области какое-то отдельное выделение при интерактивве, но так как скорее всего нет - линейный градиент. А стрелочку можно через псевдо добавить, да.

[Дмитрий Кузнецов]

Могу ошибаться, но такое можно сделать через 2 элемента - текст и иконка. Просто нужно будет скосить эти 2 элемента как надо.

Answer 1

[Ольга]

можно рамкой

.button::before{
  content:'';
  display:inline-block;
  border-right:10px solid red;
  border-top:10px solid transparent;
  height:0;
  width:0;
}

можно картинкой(фоновой или псевдоэлемент, если мутно - заюзать svg),
можно через новое свойство css clip-path https://webformyself.com/znakomstvo-s-css-svojstvo...

Comments

[Danya Wyse]

Спасибо, помогли.