Post thumbnail: 15 CSS Triangles

15 CSS Triangles

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

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

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: Transparent Rotating Pyramid Transparent Rotating Pyramid - GIF Demo

Author

  • Dronca Raul

Made with

  • HTML / CSS (SCSS)

About the code

Transparent Rotating Pyramid

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

back to top