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