15 CSS Triangles

About the code

CSS Triangles

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

△

Only CSS triangle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Pink Triangles

CSS only pink animated triangles.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Triangle

3D triangle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Double Triangle

Text cards with double triangles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Triangles

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Penrose Triangle x3

Pure CSS penrose triangle x3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Penrose Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Transparent Rotating Pyramid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Quick Gradient Triangle Mixin

Threw a really quick mixin to make triangle gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Chromatic Triangle

Try to change the $rings value and -30.times do.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Negative Triangle SASS Mixin

Create negative triangles with this SASS mixin that leverages the power of the pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Centroid-Centred CSS Triangle

CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid. Using the :after pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle's centroid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Triangles

Logo with triangles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -