40+ CSS Triangles
Boost your design skills with over 40 CSS triangles. Learn how to create and use these shapes to enhance your web projects.
1. Landscape in a Triangle by Paulina Hetman
Author: Paulina Hetman
Links: Source Code / Demo
Made with: HTML CSS
2. CSS Triangles by nana
Author: nana
Links: Source Code / Demo
Made with: HTML CSS
3. Figure by Sergey
Author: Sergey
Links: Source Code / Demo
Made with: HTML CSS
4. Wobble by Daniel Szekely
Author: Daniel Szekely
Links: Source Code / Demo
Made with: HTML CSS
5. Bordered Image Triangle by Jhey
Author: Jhey
Links: Source Code / Demo
Made with: HTML CSS
6. △ by Yusuke Nakaya
Author: Yusuke Nakaya
Links: Source Code / Demo
Made with: HTML CSS
7. Triangle by Dronca Raul
Author: Dronca Raul
Links: Source Code / Demo
Made with: HTML CSS
8. Landscape In A Triangle by Paulina Hetman
Author: Paulina Hetman
Links: Source Code / Demo
Made with: HTML CSS
9. Rotating Rounded Triangles Animation by Mark Miscavage
Author: Mark Miscavage
Links: Source Code / Demo
Made with: HTML CSS
10. Slicing Triangles by Ana Tudor
Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS
11. CSS Penrose Triangle by startinmerc
Author: startinmerc
Links: Source Code / Demo
Made with: HTML CSS
12. Penrose Triangle by Mari Johannessen
Author: Mari Johannessen
Links: Source Code / Demo
Made with: HTML CSS
13. Penrose Triangle x3 by Loray O’Connell
Author: Loray O’Connell
Links: Source Code / Demo
Made with: HTML CSS
14. Reverse clip-path with Blend Modes by Zach Saucier
Author: Zach Saucier
Links: Source Code / Demo
Made with: HTML CSS
15. Quick Gradient Triangle Mixin by Justin
Author: Justin
Links: Source Code / Demo
Made with: HTML CSS
16. Penrose Triangle by Dronca Raul
Author: Dronca Raul
Links: Source Code / Demo
Made with: HTML CSS
17. Pyramid CSS Anim by Rishabh Rastogi
Author: Rishabh Rastogi
Links: Source Code / Demo
Made with: HTML CSS
18. Pyramid Triangle: Pure CSS Animation by Shivani
Author: Shivani
Links: Source Code / Demo
Made with: HTML CSS
19. Pure CSS Prism Grid Wave by Ana Tudor
Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS
20. Double Triangle by Mary
Author: Mary
Links: Source Code / Demo
Made with: HTML CSS
21. Triangle Cutout by Tanner Hodges
Author: Tanner Hodges
Links: Source Code / Demo
Made with: HTML CSS
22. Triangle by parph
Author: parph
Links: Source Code / Demo
Made with: HTML CSS
23. Triangle by Ranger
Author: Ranger
Links: Source Code / Demo
Made with: HTML CSS
24. Chromatic Triangle by Pita
Author: Pita
Links: Source Code / Demo
Made with: HTML CSS
25. Triangle Footer by Lauren Stephenson
Author: Lauren Stephenson
Links: Source Code / Demo
Made with: HTML CSS
26. Pink Triangles by Nikita Dubko
Author: Nikita Dubko
Links: Source Code / Demo
Made with: HTML CSS
27. Triangle Storm ▲ Generative Art by Rob DiMarzo
Author: Rob DiMarzo
Links: Source Code / Demo
Made with: HTML CSS
28. Penrose And Sierpinski Triangles In CSS by Jon Kantner
Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS
29. CSS Tri Spinner by ycw
Author: ycw
Links: Source Code / Demo
Made with: HTML CSS
30. Centroid-Centred CSS Triangle by uniphil
Author: uniphil
Links: Source Code / Demo
Made with: HTML CSS
31. Negative Triangle SASS Mixin by Gion Kunz
Author: Gion Kunz
Links: Source Code / Demo
Made with: HTML CSS
32. Scss Mixin : Add A Triangle Anywhere On A Box by pil
Author: pil
Links: Source Code / Demo
Made with: HTML CSS
33. Triangle Grid with by Stephen Lee
Author: Stephen Lee
Links: Source Code / Demo
Made with: HTML CSS
34. Moving on a Penrose Triangle by Amit Sheen
Author: Amit Sheen
Links: Source Code / Demo
Made with: HTML CSS
35. Triangles by Katy DeCorah
Author: Katy DeCorah
Links: Source Code / Demo
Made with: HTML CSS
36. Transparent Triangle by Sergey
Author: Sergey
Links: Source Code / Demo
Made with: HTML CSS
37. Valraiso Loader by Jean Tinland
Author: Jean Tinland
Links: Source Code / Demo
Made with: HTML CSS
38. Triangle by Fernando Cohen
Author: Fernando Cohen
Links: Source Code / Demo
Made with: HTML CSS
39. Triangles by magnificode
Author: magnificode
Links: Source Code / Demo
Made with: HTML CSS
40. Triangle Grid Images by Jaymar G. Aranas
Author: Jaymar G. Aranas
Links: Source Code / Demo
Made with: HTML CSS
41. CSS Only Triangle with Rounded Corners by Temani Afif
Author: Temani Afif
Links: Source Code / Demo
Made with: HTML CSS
42. Dual Triangle Preloaders by Jon Kantner
Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS
43. CSS 3D Triangle Spin by Carlos
Author: Carlos
Links: Source Code / Demo
Made with: HTML CSS
44. Pure CSS Animated Triangle Grid by Ana Tudor
Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS
45. CSS Triangle Animation by Adam Orchard
Author: Adam Orchard
Links: Source Code / Demo
Made with: HTML CSS
