Collection of hand-picked free HTML and CSS triangle code examples. Update of July 2019 collection. 4 new items.

Author

  • Carlos

Made with

  • HTML (Pug) / CSS

About a code

CSS 3D Triangle Spin

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

Responsive: no

Dependencies: -

Demo image: Bordered Image Triangle

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Bordered Image Triangle

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

Responsive: yes

Dependencies: -

Demo image: Triangle Grid with nth-child

Author

  • Stephen Lee

Made with

  • HTML (Haml) / CSS (SCSS)

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

Author

  • Ranger

Made with

  • HTML / CSS (SCSS)

About the code

Triangle

Animated triangle in pure CSS.

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

Responsive: no

Dependencies: -

Author

  • Mark Miscavage

Made with

  • HTML (Pug) / CSS (SCSS)

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

Demo image: CSS Penrose Triangle

Author

  • startinmerc

Made with

  • HTML / CSS

About the code

CSS Penrose Triangle

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

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

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

Demo image: Triangle Cutout

Author

  • Tanner Hodges

Made with

  • HTML / CSS (SCSS)

About the code

Triangle Cutout

Triangle cutout with pseudo-elements.

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

Responsive: no

Dependencies: -

Demo image: CSS Triangles CSS Triangles - GIF Demo

Author

  • nana

Made with

  • HTML / CSS (SCSS)

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

Demo image: △ △ - GIF Demo

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Only CSS triangle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Pink Triangles

Author

  • Nikita Dubko

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Pink Triangles

CSS only pink animated triangles.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Triangle

Author

  • parph

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Triangle

3D triangle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Double Triangle

Author

  • Mary

Made with

  • HTML / CSS (SCSS)

About the code

Double Triangle

Text cards with double triangles.

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

Dependencies: -

Demo image: Penrose Triangle Penrose Triangle - GIF Demo

Author

  • Mari Johannessen

Made with

  • HTML / CSS (SCSS)

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

Demo image: Triangles Triangles - GIF Demo

Author

  • magnificode

Made with

  • HTML / CSS (SCSS)

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

Author

  • Dronca Raul

Made with

  • HTML / CSS

About a code

Triangle

SVG triangle with GIF background.

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

Responsive: no

Dependencies: -

Demo image: Penrose Triangle x3

Author

  • Loray O'Connell

Made with

  • HTML / CSS / JavaScript

About the code

Penrose Triangle x3

Pure CSS penrose triangle x3.

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

Dependencies: -

Demo image: Penrose Triangle

Author

  • Dronca Raul

Made with

  • HTML / CSS

About the code

Penrose Triangle

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

Dependencies: -

Demo image: Quick gradient triangle mixin

Author

  • Justin

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Quick Gradient Triangle Mixin

Threw a really quick mixin to make triangle gradients.

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

Dependencies: -

Demo image: Chromatic Triangle Chromatic Triangle - GIF Demo

Author

  • Pita

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Chromatic Triangle

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

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

Dependencies: -

Demo image: Negative Triangle SASS Mixin Negative Triangle SASS Mixin - GIF Demo

Author

  • Gion Kunz

Made with

  • HTML / CSS (SCSS)

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

Demo image: Centroid-Centred CSS Triangle Centroid-Centred CSS Triangle - GIF Demo

Author

  • uniphil

Made with

  • HTML (Slim) / CSS (Sass)

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

Demo image: Triangles

Author

  • Katy DeCorah

Made with

  • HTML (Markdown) / CSS (SCSS)

About the code

Triangles

Logo with triangles.

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

Dependencies: -