КАК в CSS сделать треугольник?

В этом коротком видео показано как можно очень быстро сделать треугольник на CSS. ВАЖНО! Треугольник на чистом CSS, без каких-либо картинок. Без SVG, PNG, иконок, иконочных шрифтов и прочего. Старый добрый CSS -)

Тут вы увидите идею реализации, а дальше вы можете их делать как тэгами, так и псевдоэлементами (ими чаще всего кстати и делают).

Это видео - css tricks (фишки), которые можно делать на чистом css/css3.

[prosto_razrabotka]

Не забудьте заглянуть сюда:

Можете добавиться в друзья:

А так же, подписаться на страницы:

[wickedtorpedo]

Такой формат уроков лучше! Без никакой воды

[yatsyk]

Строчный элемент превращаем в блок. Нулевые размеры. Бордюр толщиной 20 сплошной прозрачный. Закрашиваем в красный. Но так как размер нулевой, а бордюр выступает за этот блок и не защитывается в размер а граница примыкающей стороны бордюра с соседней режется по диагонали, то получается треугольник силами только бордюра. Великолепно!

[stasmaksimov]

Ждем создание еще одного сайта! Sass, html, может чуть Js! 👍

[thebestmusic]

Ни хрена себе!!! 👍 Никогда бы не подумал, что можно сделать border'ом.

[gregotokarev]

Замечательное видео, можешь объяснить логику построения различных геометрических фигур, видел пост на хбре где так сделали знак бесконеснсти.

[SunriseBusinessClub]

Тот же код не работает у меня в codepen.

[sergeyadamovich]

А пентагон (пятигранник) будет с :before & :after?

[usufdev]

I thought it was kinda different but in an actual code it was easy.😂😅 Thank you.

[romnytandem]

Сделайте обзоры на библиотеки GSAP крутые анимашки и тд) Плиз

[ilyabielov]

Жесть. Я вижу span которому дают display: block. может div?

[yakut]

а как туда текст вставить, картинку или background какой нибудь?

[mavarok]

-логика. Почему при изменении цвета рамки с какой-либо стороны приводит к тому, что получается треугольник? И почему расположение основания треугольника зависит от того, какую сторону рамки мы покрасим?
Но за идею спасибо!