Collection of hand-picked free HTML and CSS triangle code examples

Pyramid Triangle: Pure CSS Animation

CSS Tri Spinner

CSS Only Triangle with Rounded Corners

Moving on a Penrose Triangle

Slicing Triangles

CSS 3D Triangle Spin

Bordered Image Triangle

Triangle Grid with nth-child

Creating a grid of triangles with CSS Grid and custom properties.

Triangle

Triangle

Animated triangle in pure CSS.

Rotating Rounded Triangles Animation

Rotating rounded triangles animation. Rounded triangles black and white. Pug. SCSS. Animation degrees.

Landscape in a Triangle

Only-triangles landscape in a triangle. Animated through the seasons.

Pure CSS Prism Grid Wave

CSS Penrose Triangle

Pure CSS Animated Triangle Grid

ure CSS animated triangle grid pop with grid, variables, clip-path.

Triangle Cutout

Triangle cutout with pseudo-elements.

CSS Triangles

CSS triangle / equilateral triangle: arrow with empty space, arrow without empty space, an equilateral triangle.

△

Only CSS triangle.

Pink Triangles

CSS only pink animated triangles.

Triangle

3D triangle.

Double Triangle

Text cards with double triangles.

Penrose Triangle

The Penrose Triangle, also known as the impossible tribar, created by the Swedish artist Oscar Reutersvärd. Created using HTML and SCSS only.

Triangles

A little CSS representation of the Compilerbau "North Wall" album cover, with a nifty little bonus hover state.

Triangle

SVG triangle with GIF background.

Penrose Triangle x3

Pure CSS penrose triangle x3.