buncha/code & dev/css-triangle

CSS Triangle Generator

The classic CSS triangle uses zero-size elements with thick borders — three transparent, one coloured. No SVG, no images, no JS. Pick a direction, set dimensions, copy the CSS.

Direction

Width — 100px

Height — 100px

Color

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #dd7c35;
}

Pure CSS — runs in your browser, copy and use anywhere.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About CSS Triangle Generator

Generate pure-CSS triangle shapes using the classic border-trick. Eight directions including four diagonal corners. Set independent width and height for non-equilateral triangles.

Everything happens on your device. Close the tab and it's gone.