23 CSS Triangles

About a code

CSS 3D Triangle Spin

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

Responsive: no

Dependencies: -

About a code

Bordered Image Triangle

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

Responsive: yes

Dependencies: -

About a code

Triangle Grid with nth-child

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

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

Responsive: yes

Dependencies: -

About the code

Triangle

Animated triangle in pure CSS.

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

Responsive: no

Dependencies: -

About the code

Rotating Rounded Triangles Animation

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

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

Responsive: no

Dependencies: -

About the code

CSS Penrose Triangle

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

Responsive: no

Dependencies: -

About the code

Pure CSS Animated Triangle Grid

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Triangle Cutout

Triangle cutout with pseudo-elements.

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

Responsive: no

Dependencies: -

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 a code

Triangle

SVG triangle with GIF background.

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

Responsive: no

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

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: -