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.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
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
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: