Не получается нарисовать треугольник. Как это сделать?

Question

[Андрей Dobrin]

Не получается нарисовать треугольник, не пойму в чем ТУТ ошибка. Буду очень благодарен за помощь!

Comments

[Степан Крапивин]

назначь разные цвета обводке с каждой стороны и поймёшь в чём ошибка

&:after {
  ...
  border-left-color: red;
  border-right-color: blue;
}

Answer 1

[Senseich]

для создания треугольников давно есть генераторы: apps.eky.hk/css-triangle-generator

Comments

[Андрей Dobrin]

да генераторы генераторами, но у меня там ошибка какая-то, так то все правильно вроде.
Я прописал border-width но он не работает.

Answer 2

[SeaW]

У псевдоэлементов :before / :after обязательно нужно указывать свойство content: '', иначе он не будет отображаться.

У вас именно этот случай — добавьте у :after content: ''

Comments

[Андрей Dobrin]

Спасибо, я решил) проблема была не в этом)

Answer 3

[Lam Besis]

Как уже ответили выше, у вас не указано свойство content: ''. И это одна из самых противных ошибок)
Рекомендую почитать крайне информативное руководство по псевдоклассам и псевдоэлементам, оно переведено на русский язык.

Comments

[Андрей Dobrin]

Спасибо за информацию, но в это не тот пример, который я хотел показать) Там был как раз установлен content, но я просто не указывал цвета левой и правой границам рамки) вот указал и все получилось) Еще раз спасибо)

[Lam Besis]

Андрей Dobrin, если у вас не шибко требовательный по кроссбраузерности проект, то эту стрелочку ещё можно сделать через clip-path, вот поиграйтесь тут: bennettfeely.com/clippy , крайне удобная вещь для подобных задач.

[Андрей Dobrin]

Благодарю)