40+ CSS Triangles

Last Updated on by in CSS Examples
CSS Triangle

If you are looking to add flair, creativity, elegance, and dynamism to your web projects, CSS triangles are the best choice. These triangle effects emulate the visual appearance of geometric shapes, creating eye-catching, visually stunning UI/UX design and memorable user interfaces.

Whether you want to create a tech-futuristic design or add angular or geometric patterns to your web design or development projects, CSS triangles will help you serve both decorative and functional purposes, adding visual interest, conveying meaning, and contributing to the overall aesthetic appeal of the website design.

In this post, we present a comprehensive collection of free HTML and CSS triangle code examples sourced from trustworthy websites such as GitHub and CodePen. These websites have meticulously crafted triangle shapes using the true power of CSS, aligning effortlessly with any website or design theme.

Our CSS triangle compilation offers tons of unique options, be it cool triangle hover effects, unique and creative triangle animations, mesmerizing triangle transitions, responsive triangles, or triangles without images. Fret not!, we have covered all!

This extensive compilation not only serves as a source of visual design inspiration for designers but also plays a vital role in enhancing the visual allure of your projects. With these triangle examples, you can continually stay at the forefront of current trends.

Let’s explore the creative potential of CSS triangles. Dive into the latest collection and see how these unassuming shapes can bring your web design to life.

1. Penrose triangle x3

See the Pen
Penrose triangle x3
by Loray O’Connell (@lorayoconnell)
on CodePen.


Author: Loray O’Connell @lorayoconnell
Links: Source Code / Demo
Created on: October 24, 2016
Made with: HTML, CSS

2. Triangle Grid

See the Pen
Triangle Grid with nth-child #CodePenChallenge
by Stephen Lee (@abcretrograde)
on CodePen.


Author: Stephen Lee @abcretrograde
Links: Source Code / Demo
Created on: December 4, 2019
Made with: HTML(Haml), CSS(SCSS)

3. Penrose Triangle

See the Pen
Penrose Triangle
by Mari Johannessen (@marijoha)
on CodePen.


Author: Mari Johannessen @marijoha
Links: Source Code / Demo
Created on: September 15, 2017
Made with: HTML, CSS(SCSS)

4. Triangle Loading Animation

See the Pen
Triangle Loading Animation
by Felix Rilling (@FelixRilling)
on CodePen.


Author: Felix Rilling @FelixRilling
Links: Source Code / Demo
Created on: September 19, 2015
Made with: HTML, CSS(SCSS)

5. Triangle

See the Pen
Triangle △
by Dronca Raul (@rauldronca)
on CodePen.


Author: Dronca Raul @rauldronca
Links: Source Code / Demo
Created on: November 29, 2016
Made with: HTML, CSS

6. Triangular openings (pure CSS)

See the Pen
Triangular openings (pure CSS)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: September 28, 2014
Made with: HTML(Haml), CSS(SCSS)

7. Only CSS: Triangle

See the Pen
Only CSS: Triangle △
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.


Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: October 4, 2018
Made with: HTML(Pug), CSS(SCSS)

8. Text + double triangle

See the Pen
text + double triangle
by Mary (@MaryLobareva)
on CodePen.


Author: Mary @MaryLobareva
Links: Source Code / Demo
Created on: April 5, 2018
Made with: HTML, CSS(SCSS)

9. CSS Triangle

See the Pen
CSS Triangle
by Nick Salloum (@callmenick)
on CodePen.


Author: Nick Salloum @callmenick
Links: Source Code / Demo
Created on: May 4, 2014
Made with: HTML, CSS

10. Pyramorphix corner spin (pure CSS)

See the Pen
pyramorphix corner spin (pure CSS)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: March 2, 2016
Made with: HTML(Pug), CSS(SCSS)

11. CSS Penrose Triangle

See the Pen
CSS Penrose Triangle
by startinmerc (@startinmerc)
on CodePen.


Author: startinmerc @startinmerc
Links: Source Code / Demo
Created on: February 12, 2019
Made with: HTML, CSS

12. Explode cube to rhombic dodecahedron (pure CSS)

See the Pen
Explode cube to rhombic dodecahedron (pure CSS)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: September 19, 2013
Made with: HTML(Haml), CSS(SCSS)

13. Reverse clip path with blend modes

See the Pen
Reverse clip path with blend modes
by Zach Saucier (@ZachSaucier)
on CodePen.


Author: Zach Saucier @ZachSaucier
Links: Source Code / Demo
Created on: December 22, 2015
Made with: HTML, CSS(SCSS)

14. comprise 6hedron (pure CSS)

See the Pen
comprise 6hedron (pure CSS)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: August 12, 2015
Made with: HTML(Haml), CSS(SCSS)

15. Illuminati-Rainbow Loading

See the Pen
Illuminati-Rainbow Loading
by Kevin Foley (@foleyatwork)
on CodePen.


Author: Kevin Foley @foleyatwork
Links: Source Code / Demo
Created on: August 23, 2017
Made with: HTML, CSS(Less), JS(Babel)

16. Rotating Rounded Triangles Animation (SCSS)

See the Pen
Rotating Rounded Triangles Animation (SCSS)
by markmiscavage (@markmiscavage)
on CodePen.


Author: markmiscavage @markmiscavage
Links: Source Code / Demo
Created on: February 16, 2019
Made with: HTML(Pug), CSS(SCSS)

17. Random Triangles Nonsense

See the Pen
Random Triangles Nonsense
by Nikolay Talanov (@suez)
on CodePen.


Author: Nikolay Talanov @suez
Links: Source Code / Demo
Created on: September 2, 2016
Made with: HTML, CSS(SCSS)

18. Chromatic triangle

See the Pen
Chromatic triangle
by Pita (@felipedefarias)
on CodePen.


Author: Pita @felipedefarias
Links: Source Code / Demo
Created on: August 19, 2014
Made with: HTML(Haml), CSS(Sass)

19. Triangles

See the Pen
Triangles
by Katy DeCorah (@katydecorah)
on CodePen.


Author: Katy DeCorah @katydecorah
Links: Source Code / Demo
Created on: August 6, 2013
Made with: HTML(Markdown), CSS(SCSS)

20. Pure CSS animated grid pop with grid, variables, clip-path

See the Pen
Pure CSS animated △ grid pop with grid, variables, clip-path
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: January 24, 2019
Made with: HTML(Pug), CSS(SCSS)

21. Triangle Loading Animation

See the Pen
Triangle Loading Animation
by Tony Banik (@banik)
on CodePen.


Author: Tony Banik @banik
Links: Source Code / Demo
Created on: September 13, 2018
Made with: HTML(Slim), CSS(SCSS)

22. Moving on a Penrose Triangle

See the Pen
Moving on a Penrose Triangle
by Amit Sheen (@amit_sheen)
on CodePen.


Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: July  23, 2021
Made with: HTML, CSS(SCSS)

23. North Wall

See the Pen
North Wall
by magnificode (@magnificode)
on CodePen.


Author: magnificode @magnificode
Links: Source Code / Demo
Created on: June 17, 2017
Made with: HTML, CSS(SCSS)

24. Triangles

See the Pen
Triangles
by Irem Lopsum (@iremlopsum)
on CodePen.


Author: Irem Lopsum @iremlopsum
Links: Source Code / Demo
Created on: May 21, 2016
Made with: HTML(Pug), CSS(SCSS)

25. CSS 3D triangle spin

See the Pen
CSS 3D triangle spin
by Carlos (@cdmoro)
on CodePen.


Author: Carlos @cdmoro
Links: Source Code / Demo
Created on: October 18, 2020
Made with: HTML(Pug), CSS

26. Penrose Triangle

See the Pen
Penrose Triangle
by Dronca Raul (@rauldronca)
on CodePen.


Author: Dronca Raul @rauldronca
Links: Source Code / Demo
Created on: October 23, 2016
Made with: HTML, CSS

27. Triangles

See the Pen
#cssloop 009
by Matteo Belfiore (@heartbox)
on CodePen.


Author: Matteo Belfiore @heartbox
Links: Source Code / Demo
Created on: May 26, 2016
Made with: HTML, CSS(SCSS)

28. Triangle

See the Pen
triangle
by parph (@parph)
on CodePen.


Author: parph @parph
Links: Source Code / Demo
Created on: April 24, 2018
Made with: HTML(Haml), CSS(Sass)

29. Todrick Triangle – Neon Glow Effect Using CSS Drop Shadows and Clip Paths

See the Pen
Todrick Triangle – Neon Glow Effect Using CSS Drop Shadows and Clip Paths
by Dave Brogan (@davebrogan)
on CodePen.


Author: Dave Brogan @davebrogan
Links: Source Code / Demo
Created on: November  28, 2019
Made with: HTML, CSS(SCSS)

30. Bordered image triangle

See the Pen
Bordered image triangle
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: May 3, 2020
Made with: HTML(Pug), CSS(Stylus)

31. Endless loading

See the Pen
3| Endless loading
by Yiting Liu (@yitliu)
on CodePen.


Author: Yiting Liu @yitliu
Links: Source Code / Demo
Created on: May 25, 2018
Made with: HTML, CSS

32. Climbing Pyramid

See the Pen
Climbing Pyramid
by Zach Saucier (@ZachSaucier)
on CodePen.


Author: Zach Saucier @ZachSaucier
Links: Source Code / Demo
Created on: December 29, 2013
Made with: HTML, CSS

33. Portfolio

See the Pen
Portfolio
by @BrawadaCom (@Anna_Batura)
on CodePen.


Author: @BrawadaCom @Anna_Batura
Links: Source Code / Demo
Created on: May 25, 2016
Made with: HTML(Slim), CSS(Sass)

34. CSS Triangle / Equilateral Triangle

See the Pen
CSS Triangle / Equilateral Triangle
by nana (@nanacodesign)
on CodePen.


Author: nana @nanacodesign
Links: Source Code / Demo
Created on: October 7, 2018
Made with: HTML, CSS(SCSS)

35. Now how does this happen? ????

See the Pen
Now how does this happen? 🙂
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: April 2, 2013
Made with: HTML, CSS

36. Triangle Cutout Via Pseudo-Elements

See the Pen
Triangle Cutout via Pseudo-Elements
by Tanner Hodges (@tannerhodges)
on CodePen.


Author:  Tanner Hodges @tannerhodges
Links: Source Code / Demo
Created on: October 29, 2018
Made with: HTML, CSS(SCSS)

37. Dual Triangle Preloaders

See the Pen
Dual Triangle Preloaders
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: November 20, 2019
Made with: HTML, CSS

38. Triangle

See the Pen
Triangle
by Ranger (@royranger)
on CodePen.


Author: Ranger @royranger
Links: Source Code / Demo
Created on: July 7, 2019
Made with: HTML, CSS(SCSS)

39. Quick Gradient Triangle Mixin

See the Pen
Quick gradient triangle mixin
by Justin (@nilbog)
on CodePen.


Author: Justin @nilbog
Links: Source Code / Demo
Created on: February 24, 2015
Made with: HTML(Haml), CSS(SCSS)

40. Pink Triangles

See the Pen
???????? Pink Triangles (CSS Only) — Chrome, Firefox
by Nikita Dubko (@dark_mefody)
on CodePen.


Author: Nikita Dubko @dark_mefody
Links: Source Code / Demo
Created on: June 26, 2018
Made with: HTML(Pug), CSS(SCSS)

41. Centroid-centred CSS Triangle

See the Pen
Centroid-centred CSS triangle
by phil (@uniphil)
on CodePen.


Author: phil @uniphil
Links: Source Code / Demo
Created on: November 5, 2013
Made with: HTML(Slim), CSS(Sass)

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.