Triangles are not just basic geometric shapes; in the world of web design, they can be powerful tools for creating eye-catching layouts, innovative navigation menus, and engaging user interfaces. If you're on the hunt for inspiration and ready-to-use code snippets, our latest collection, "CSS Triangles", has you covered.

This carefully curated compilation features an assortment of hand-picked, free HTML and CSS triangle code examples gathered from trusted sources like CodePen, GitHub, and other valuable online resources. As of April 2023, we've refreshed the collection with nine new additions, ensuring you have access to the latest and greatest in triangle-based web design.

Whether you're a web developer looking to add a unique flair to your website or a designer in search of versatile shapes to spice up your projects, this collection offers a wealth of creative possibilities. Triangles can be used for anything from creating dynamic buttons to crafting intriguing page transitions. With these code examples at your disposal, you'll be well-equipped to take your web design skills to the next level.

Dive into the world of CSS triangles and unlock a realm of creativity. Explore the updated collection today and discover how these simple shapes can transform your web design visions into reality.

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