Collection of hand-picked free HTML and CSS triangle code examples from CodePen, GitHub, and other resources. Update of February 2021 collection. Nine new items.

Author

  • Shivani

Made with

  • HTML / CSS

About a code

Pyramid Triangle: Pure CSS Animation

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

Responsive: no

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About a code

CSS Tri Spinner

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

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only Triangle with Rounded Corners

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

Responsive: no

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Moving on a Penrose Triangle

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

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Slicing Triangles

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

Responsive: no

Dependencies: -

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

  • Fernando Cohen

Made with

  • HTML / CSS (Less)

About a code

Triangle

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

Responsive: no

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: Landscape in a Triangle

Author

  • Paulina Hetman

Made with

  • HTML / CSS (SCSS)

About a code

Landscape in a Triangle

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

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

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Prism Grid Wave

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

Author

  • Zach Saucier

Made with

  • HTML / CSS (SCSS)

About a code

Reverse clip-path with Blend Modes

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

Responsive: yes

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