UTILS.
100% в браузере

Генератор CSS-треугольников

Создайте треугольник на чистом CSS в любом направлении и скопируйте CSS.

Об этом инструменте

Создайте треугольник на чистом CSS с помощью классического трюка с рамками — выберите направление, размер и цвет, затем скопируйте правило. Предпросмотр обновляется вживую, и всё работает в вашем браузере.

Часто задаваемые вопросы

Как работает трюк с рамками?
У элемента с нулевыми шириной и высотой видны только его рамки; если сделать три рамки прозрачными, останется одна цветная рамка в форме треугольника.
Почему ширина и высота равны 0?
Без области блока рамки сходятся в центре, поэтому единственная видимая рамка превращается в чистый треугольник, а не в толстый край.

Больше инструментов