35+ Awesome CSS Triangles (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS triangle code examples. These CSS triangles can be used for creating all sorts of cool effects.
1. CSS Penrose Triangle
Need to figure out gradient borders...
Author: startinmerc (startinmerc)
Links: Source Code / Demo
Created on: February 12, 2019
Made with: HTML, CSS
Tags: cpc-triangle, codepenchallenge
2. CSS Triangle / Equilateral Triangle
CSS Triangle / Equilateral Triangle
Author: nana (nana8)
Links: Source Code / Demo
Created on: October 7, 2018
Made with: HTML, SCSS
Tags: css-triangle, equilateral triangle css, equilateral-triangle, triangle border, css
3. Text + Double Triangle
Author: Mary (MaryLobareva)
Links: Source Code / Demo
Created on: April 5, 2018
Made with: HTML, SCSS
4. Rotating Rounded Triangles Animation
Rotating Rounded Triangles Animation. Rounded triangles black and white. Pug. SCSS. Animation degrees. Reference: https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css Inspiration: https://dribbble.com/shots/5582653-Triangles View on Dribbble: https://dr...Read More
Author: Mark M (markmiscavage)
Created on: February 15, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, rounded, triangles, cpc-triangle, codepenchallenge
5. CSS Triangle
Author: Ranger (royranger)
Links: Source Code / Demo
Created on: July 6, 2019
Made with: HTML, SCSS
6. Triangle Cutout Via Pseudo-Elements
Author: Tanner Hodges (tannerhodges)
Links: Source Code / Demo
Created on: October 29, 2018
Made with: HTML, SCSS
7. Pure CSS Animated △ Grid Pop With Grid, Variables, Clip-path
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: January 24, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: cpc-pop, css-grid, css-variables, jade, clip-path
8. Pink Triangles
Author: Nikita Dubko (dark_mefody)
Links: Source Code / Demo, Twitter.com
Created on: June 26, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, illusion
9. Only CSS: Triangle △
Author: Yusuke Nakaya (YusukeNakaya)
Links: Source Code / Demo
Created on: October 4, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition
10. 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.
Author: Mari Johannessen (marijoha)
Links: Source Code / Demo
Created on: September 15, 2017
Made with: HTML, SCSS
Tags: penrose triangle, scss, html, animation, css
11. Pure CSS Triangle
Author: parph (parph)
Links: Source Code / Demo
Created on: April 24, 2018
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
12. Penrose Triangle X3
Penrose triangle x3 Pure css
Author: Loray O'Connell (lorayoconnell)
Links: Source Code / Demo
Created on: October 24, 2016
Made with: HTML, CSS
Tags: penrose, triangle, pure-css
13. North Wall
A little CSS representation of the Compilerbau North Wall album cover, with a nifty little bonus hover state . https://compilerbau.bandcamp.com/album/north-wall
Author: magnificode (magnificode)
Created on: June 16, 2017
Made with: HTML, SCSS
Tags: clip-path, css, animation
14. Quick Gradient Triangle Mixin
Threw a really quick mixin together to make triangle gradients.
Author: Justin (nilbog)
Links: Source Code / Demo
Created on: February 23, 2015
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: mixin, triangle, gradient, css
15. Penrose Triangle 2
Author: Dronca Raul (rauldronca)
Links: Source Code / Demo
Created on: October 23, 2016
Made with: HTML, CSS, JS
16. Negative Triangle SASS Mixin
Create negative triangles with this SASS Mixin that leverages the power of the pseudo elements.
Author: Gion Kunz (gionkunz)
Links: Source Code / Demo
Created on: March 14, 2014
Made with: HTML, SCSS, JS
Tags: sass, triangle, negative, css
17. Chromatic Triangle
Thank @meamundum the idea of putting colors on this project, I love you ♥
Author: Pita (felipedefarias)
Links: Source Code / Demo
Created on: August 18, 2014
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: colors, animation, sass, geometry, weird
18. CSS Triangles
Give it a hover! I've been really into simple geometric shapes lately. Original design from Dribbble http://dribbble.com/shots/1183733-Posh-wordpress-theme-logo-design.
Author: Katy DeCorah (katydecorah)
Links: Source Code / Demo
Created on: August 5, 2013
Made with: Markdown, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Markdown
Tags: dribbble, animation
19. Centroid-centred CSS Triangle
CSS transforms, particularly rotate, are anchored at the middle of their bounding boxes. The middle of a typical CSS triangle's bounding box is offset from its centroid.
Author: uniphil (uniphil)
Links: Source Code / Demo
Created on: November 5, 2013
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: CoffeeScript
HTML Pre-processor: Slim
20. Triangle Footer
Inverted upside-down triangle shape used to create a unique shape at the top of a footer section for a website.
Author: Lauren Stephenson (CompSciLauren)
Links: Source Code / Demo
Created on: May 24, 2020
Made with: HTML, CSS
Tags: triangle, footer
21. Triangle Grid Images
Author: Jaymar G. Aranas (jaymar-g-aranas)
Links: Source Code / Demo
Created on: January 25, 2020
Made with: HTML, CSS
Tags: triangle, grid, images
22. Dual Triangle Preloaders
A collection of preload animations made using only two triangles, whether they look like practical ones or just plain weird
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: November 20, 2019
Made with: HTML, CSS
Tags: triangle, loading, preload, preloader, spinner
23. Scss Mixin : Add A Triangle Anywhere On A Box
Added an "hover" option
Author: pil (pi-L)
Links: Source Code / Demo
Created on: September 15, 2019
Made with: HTML, SCSS
Tags: scss, mixin, chatbox, triangle, sass
24. Triangle Storm ▲ Generative Art
▲ Click to regenerate the triangles! ▼ This generative art demo populates a 20 x 40 css grid with triangles. The chances of a triangle being displayed increase with the number of rows. If a triangle is displayed, it's given a random transparency. Upon click, the triangles get regenerated ...Read More
Author: Rob DiMarzo (robdimarzo)
Links: Source Code / Demo
Created on: August 15, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: generative-art, css-variables, svg, triangle, random
25. CSS Triangle Animation
Just a quick self-reminder of CSS shapes & transforms
Author: Adam Orchard (orchard)
Links: Source Code / Demo
Created on: May 20, 2014
Made with: HTML, Less
Tags: css3, transform, pseudo-elements, triangle, rotate
26. Transparent Triangle
Author: Sergey (Corpus)
Links: Source Code / Demo
Created on: May 25, 2019
Made with: HTML, Sass
Tags: triangle, figure, transparent, background
27. Penrose And Sierpinski Triangles In CSS
A 3D CSS mix of the Penrose and Sierpinski triangles. It’ll periodically rotate to reveal how it’s done!
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
28. Figure
Author: Sergey (Corpus)
Links: Source Code / Demo
Created on: May 25, 2019
Made with: HTML, CSS
Tags: figure, triangle
29. Wobble
Css triangle experiment.
Author: Daniel Szekely (dani3lsz)
Links: Source Code / Demo
Created on: March 24, 2019
Made with: Slim, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: css, triangle, wobble
30. Landscape In A Triangle
Created for the February 2019 CodePen Challenge Only-triangles landscape in a triangle. Animated through the seasons. I used two technics to create triangles: the border approach and the clip-path one.
Author: Paulina Hetman (pehaa)
Links: Source Code / Demo
Created on: February 14, 2019
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-triangle, clip-path, border, triangle
31. Valraiso Loader
Forked from Dominic Kolbe's Pen Triangle SVG Loader (pure css).
Author: Jean Tinland (jean-tinland)
Links: Source Code / Demo
Created on: July 30, 2020
Made with: HTML, CSS
Tags: svg, triangle, pure-css, loader
32. Pyramid CSS Anim
This pen is part of my 100 Days CSS Challenge, view all pens under http://100dayscss.com
Author: Rishabh Rastogi (rishabh0211)
Links: Source Code / Demo
Created on: July 8, 2020
Made with: HTML, SCSS
Tags: shadow, clip-path, animation, triangle
More Awesome Lists:
Share: