42+ CSS Triangles

The CSS triangles are quite cool shapes used in web development, mainly to mimic the appearance of a triangle. This collection features an impressive compilation of top free HTML and CSS triangle examples that we’ve sourced from CodePen and GitHub. The best part about these unique and stylish triangle shapes is that they are suitable for decorating elements on any web design and development projects.

When you start working on any project, you need various design or code references to enhance the aesthetics of your project, No matter if you are a UI designer or developer, we have something for everyone. We hand-pick each CSS triangle code snippet in our compilation, ensuring it features vibrant colours, eye-catching animations, high customizability, and ease of implementation. There are several other ways you can use these items to beautify your project, so without further ado, let’s explore our collection of the best 42+ CSS triangle examples and impress your site audience.

1. Transparent CSS Triangle with borders

See the Pen <a href="https://codepen.io/creme/pen/QWgPrQ"> Transparent CSS Triangle with borders</a> by creme (<a href="https://codepen.io/creme">@creme</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: creme
Source: Code / Demo
Created on: JUNE 18, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Rotating Rounded Triangles Animation (SCSS)

See the Pen <a href="https://codepen.io/markmiscavage/pen/PVxqMN"> Rotating Rounded Triangles Animation (SCSS)</a> by markmiscavage (<a href="https://codepen.io/markmiscavage">@markmiscavage</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: markmiscavage
Source: Code / Demo
Created on: FEBRUARY 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

3. Centroid-centred CSS Triangle

See the Pen <a href="https://codepen.io/uniphil/pen/nmGywa"> Centroid-centred CSS triangle</a> by phil (<a href="https://codepen.io/uniphil">@uniphil</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: phil
Source: Code / Demo
Created on: November 5, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(Sass)

4. Triangles

See the Pen <a href="https://codepen.io/katydecorah/pen/nNaoqP"> Triangles</a> by Katy DeCorah (<a href="https://codepen.io/katydecorah">@katydecorah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Katy DeCorah
Source: Code / Demo
Created on: AUGUST 6, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Markdown), CSS(SCSS)

5. CSS Triangle / Equilateral Triangle

See the Pen <a href="https://codepen.io/nanacodesign/pen/GYjaJO"> CSS Triangle / Equilateral Triangle</a> by nana (<a href="https://codepen.io/nanacodesign">@nanacodesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nana
Source: Code / Demo
Created on: OCTOBER 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Moving on a Penrose Triangle

See the Pen <a href="https://codepen.io/amit_sheen/pen/gOWXMJp"> Moving on a Penrose Triangle</a> by Amit Sheen (<a href="https://codepen.io/amit_sheen">@amit_sheen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amit Sheen
Source: Code / Demo
Created on: JULY 23, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

See the Pen <a href="https://codepen.io/thebabydino/pen/KJddbK"> Pure CSS animated △ grid pop with grid, variables, clip-path</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: JANUARY 24, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

8. React Animated Page Transitions

See the Pen <a href="https://codepen.io/sdras/pen/gWWQgb"> React Animated Page Transitions</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Drasner
Source: Code / Demo
Created on: MAY 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

9.CSS Penrose Triangle

See the Pen <a href="https://codepen.io/startinmerc/pen/ZwRWaP"> CSS Penrose Triangle</a> by startinmerc (<a href="https://codepen.io/startinmerc">@startinmerc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: startinmerc
Source: Code / Demo
Created on: FEBRUARY 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Pink Triangles

See the Pen <a href="https://codepen.io/dark_mefody/pen/WygpKB"> 🐝💣 Pink Triangles (CSS Only) — Chrome, Firefox</a> by Nikita Dubko (<a href="https://codepen.io/dark_mefody">@dark_mefody</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikita Dubko
Source: Code / Demo
Created on: JUNE 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

11. Penrose triangle x3

See the Pen <a href="https://codepen.io/lorayoconnell/pen/jMdooE"> Penrose triangle x3</a> by Loray O’Connell (<a href="https://codepen.io/lorayoconnell">@lorayoconnell</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Loray O’Connell
Source: Code / Demo
Created on: OCTOBER 24, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Triangle Loading Animation

See the Pen <a href="https://codepen.io/banik/pen/gdKWrq"> Triangle Loading Animation</a> by Tony Banik (<a href="https://codepen.io/banik">@banik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tony Banik
Source: Code / Demo
Created on: SEPTEMBER 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(SCSS)

13.Text + double triangle

See the Pen <a href="https://codepen.io/MaryLobareva/pen/EEdxeV"> text + double triangle </a> by Mary (<a href="https://codepen.io/MaryLobareva">@MaryLobareva</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mary
Source: Code / Demo
Created on: APRIL 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Triangle

See the Pen <a href="https://codepen.io/royranger/pen/gNBYqd"> Triangle</a> by Ranger (<a href="https://codepen.io/royranger">@royranger</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ranger
Source: Code / Demo
Created on: JULY 7, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. North Wall

See the Pen <a href="https://codepen.io/magnificode/pen/PjWGrb"> North Wall</a> by magnificode (<a href="https://codepen.io/magnificode">@magnificode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: magnificode
Source: Code / Demo
Created on: JUNE 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Triangle Grid

See the Pen <a href="https://codepen.io/abcretrograde/pen/OJPPOQq"> Triangle Grid with nth-child #CodePenChallenge</a> by Stephen Lee (<a href="https://codepen.io/abcretrograde">@abcretrograde</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephen Lee
Source: Code / Demo
Created on: DECEMBER 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

17. Triangle

See the Pen <a href="https://codepen.io/parph/pen/jxqmed"> triangle</a> by parph (<a href="https://codepen.io/parph">@parph</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: parph
Source: Code / Demo
Created on: APRIL 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

18. Quick Gradient Triangle Mixin

See the Pen <a href="https://codepen.io/nilbog/pen/NPMvYG"> Quick gradient triangle mixin</a> by Justin (<a href="https://codepen.io/nilbog">@nilbog</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin
Source: Code / Demo
Created on: FEBRUARY 24, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

19. CSS Triangle

See the Pen <a href="https://codepen.io/callmenick/pen/YzGEgE"> CSS Triangle</a> by Nick Salloum (<a href="https://codepen.io/callmenick">@callmenick</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nick Salloum
Source: Code / Demo
Created on: MAY 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Dual Triangle Preloaders

See the Pen <a href="https://codepen.io/jkantner/pen/YzzgWRY"> Dual Triangle Preloaders</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: NOVEMBER 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Only CSS: Triangle

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/LgNJQx"> Only CSS: Triangle △</a> by Yusuke Nakaya (<a href="https://codepen.io/YusukeNakaya">@YusukeNakaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yusuke Nakaya
Source: Code / Demo
Created on: OCTOBER 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

22. Triangles

See the Pen <a href="https://codepen.io/iremlopsum/pen/eZwQeB"> Triangles</a> by Irem Lopsum (<a href="https://codepen.io/iremlopsum">@iremlopsum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Irem Lopsum
Source: Code / Demo
Created on: MAY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

23. Explode cube to rhombic dodecahedron (pure CSS)

See the Pen <a href="https://codepen.io/thebabydino/pen/nQmNrX"> Explode cube to rhombic dodecahedron (pure CSS)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: SEPTEMBER 19, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

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

See the Pen <a href="https://codepen.io/davebrogan/pen/OJJKXpy"> Todrick Triangle – Neon Glow Effect Using CSS Drop Shadows and Clip Paths</a> by Dave Brogan (<a href="https://codepen.io/davebrogan">@davebrogan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave Brogan
Source: Code / Demo
Created on: NOVEMBER 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Triangle Cutout Via Pseudo-Elements

See the Pen <a href="https://codepen.io/tannerhodges/pen/JmVMKZ"> Triangle Cutout via Pseudo-Elements</a> by Tanner Hodges (<a href="https://codepen.io/tannerhodges">@tannerhodges</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tanner Hodges
Source: Code / Demo
Created on: OCTOBER 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Penrose Triangle

See the Pen <a href="https://codepen.io/marijoha/pen/ZXGjjq"> Penrose Triangle</a> by Mari Johannessen (<a href="https://codepen.io/marijoha">@marijoha</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mari Johannessen
Source: Code / Demo
Created on: SEPTEMBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Random Triangles Nonsense

See the Pen <a href="https://codepen.io/suez/pen/JRjOpL"> Random Triangles Nonsense</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanov
Source: Code / Demo
Created on: SEPTEMBER 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. CSS 3D triangle spin

See the Pen <a href="https://codepen.io/cdmoro/pen/GRqZVEE"> CSS 3D triangle spin</a> by Carlos (<a href="https://codepen.io/cdmoro">@cdmoro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Carlos
Source: Code / Demo
Created on: OCTOBER 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS

29. Pyramorphix corner spin (pure CSS)

See the Pen <a href="https://codepen.io/thebabydino/pen/QNwoqE"> pyramorphix corner spin (pure CSS)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: MARCH 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

30.Bordered image triangle

See the Pen <a href="https://codepen.io/jh3y/pen/RwWjrNP"> Bordered image triangle</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: MAY 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

31.Triangle Loading Animation

See the Pen <a href="https://codepen.io/FelixRilling/pen/qOZwjg"> Triangle Loading Animation</a> by Felix Rilling (<a href="https://codepen.io/FelixRilling">@FelixRilling</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Felix Rilling
Source: Code / Demo
Created on: SEPTEMBER 19, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

32. Penrose Triangle

See the Pen <a href="https://codepen.io/rauldronca/pen/LRqRaR"> Penrose Triangle</a> by Dronca Raul (<a href="https://codepen.io/rauldronca">@rauldronca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dronca Raul
Source: Code / Demo
Created on: OCTOBER 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33.Reverse clip path with blend modes

See the Pen <a href="https://codepen.io/ZachSaucier/pen/mVEwje"> Reverse clip path with blend modes</a> by Zach Saucier (<a href="https://codepen.io/ZachSaucier">@ZachSaucier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zach Saucier
Source: Code / Demo
Created on: DECEMBER 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Chromatic triangle

See the Pen <a href="https://codepen.io/felipedefarias/pen/WNyvNW"> Chromatic triangle</a> by Pita (<a href="https://codepen.io/felipedefarias">@felipedefarias</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pita
Source: Code / Demo
Created on: AUGUST 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

35. Endless loading

See the Pen <a href="https://codepen.io/yitliu/pen/erwazO"> 3| Endless loading</a> by Yiting Liu (<a href="https://codepen.io/yitliu">@yitliu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yiting Liu
Source: Code / Demo
Created on: MAY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

36.comprise 6hedron (pure CSS)

See the Pen <a href="https://codepen.io/thebabydino/pen/GJLoLv"> comprise 6hedron (pure CSS)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: AUGUST 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

37. Triangles

See the Pen <a href="https://codepen.io/heartbox/pen/EyYvdR"> #cssloop 009</a> by Matteo Belfiore (<a href="https://codepen.io/heartbox">@heartbox</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matteo Belfiore
Source: Code / Demo
Created on: MAY 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

38. Triangle

See the Pen <a href="https://codepen.io/rauldronca/pen/worLJY"> Triangle △</a> by Dronca Raul (<a href="https://codepen.io/rauldronca">@rauldronca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dronca Raul
Source: Code / Demo
Created on: NOVEMBER 29, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

39. Now how does this happen?

See the Pen <a href="https://codepen.io/thebabydino/pen/kMjWJQ"> Now how does this happen? 🙂 </a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: APRIL 2, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Climbing Pyramid

See the Pen <a href="https://codepen.io/ZachSaucier/pen/DWmNKo"> Climbing Pyramid</a> by Zach Saucier (<a href="https://codepen.io/ZachSaucier">@ZachSaucier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zach Saucier
Source: Code / Demo
Created on: DECEMBER 29, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Illuminati-Rainbow Loading

See the Pen <a href="https://codepen.io/foleyatwork/pen/ZJodgr"> Illuminati-Rainbow Loading</a> by Kevin Foley (<a href="https://codepen.io/foleyatwork">@foleyatwork</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin Foley
Source: Code / Demo
Created on: AUGUST 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript(Babel)

42.Portfolio

See the Pen <a href="https://codepen.io/Anna_Batura/pen/PzYWGe"> Portfolio</a> by @BrawadaCom (<a href="https://codepen.io/Anna_Batura">@Anna_Batura</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @BrawadaCom
Source: Code / Demo
Created on: MAY 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

43. Triangular openings (pure CSS)

See the Pen <a href="https://codepen.io/thebabydino/pen/bGOQgM"> Triangular openings (pure CSS)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. Author: Ana Tudor
Source: Code / Demo
Created on: SEPTEMBER 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)