20+ CSS Triangle Backgrounds - Free Code + Demos
Collection of 20+ CSS Triangle Backgrounds. All items are 100% free and open-source.
1. 2 Triangles Background
Author: vassili (alivim)
Links: Source Code / Demo
Created on: January 25, 2018
Made with: HTML, CSS
2. Triangles Animation
Author: Lindsay Grizzard (lindsayrusd)
Links: Source Code / Demo
Created on: January 11, 2017
Made with: HTML, SCSS
3. CSS-only Triangular Grid
Author: Ben Edwards (benedfit)
Links: Source Code / Demo
Created on: September 1, 2016
Made with: Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: clockfe
4. CSS Triangle Pattern Background
Author: Edmundo Santos (edmundojr)
Links: Source Code / Demo
Created on: July 19, 2016
Made with: SCSS
Tags: pattern, triangle, background, css, seamless
5. Responsive Triangle Background Images
Responsive triangle background images using clip-path
Author: Edd Yerburgh (eddyerburgh)
Links: Source Code / Demo
Created on: December 1, 2015
Made with: HTML, CSS
Tags: clip-path, responsive, fullscreen triangle
6. Untitled
Author: Flugg (flugg)
Links: Source Code / Demo
Created on: June 3, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
7. Random Triangle Background
Author: Russian Rebouças (Russian60)
Links: Source Code / Demo
Created on: February 1, 2014
Made with: HTML, SCSS
Tags: scss, triangles, random, background
8. Background Pattern - SCSS
Author: Heidi Chan (hckkiu)
Links: Source Code / Demo
Created on: August 24, 2020
Made with: HTML, SCSS
Tags: background, pattern, strips, dotted, triangle
9. CSS Triangle Image Crop
Author: Michael Hobizal (mikehobizal)
Links: Source Code / Demo
Created on: October 10, 2014
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, crop, staff, photos, triangles
10. CSS Fractured Triangle Background
Author: IPRESSBUTTON (ildarmgt)
Links: Source Code / Demo
Made with: HTML, CSS
11. CSS Triangle Background
Author: Jaymar G. Aranas (jaymar-g-aranas)
Links: Source Code / Demo
Made with: HTML, CSS
12. Triangle Circle Square Animated Hero Background
Author: Stephen Nixon (thundernixon)
Links: Source Code / Demo
Created on: May 6, 2016
Made with: HTML, CSS
13. Triangle Loading Animation
A rather simple Loading animation using only a few CS triangles and animations
Author: Felix Rilling (FelixRilling)
Links: Source Code / Demo
Created on: September 18, 2015
Made with: HTML, SCSS
Tags: css, ui, loading, load
14. Swirling Triangles (Green Sock Animation)
Getting some polygons swirling was the first step in creating an animation idea that I thought of today. UPDATE: Add one of my coworker's urgings, I added a Doritos mode. I couldn't be more satisfied.
Author: halvves (halvves)
Links: Source Code / Demo
Created on: February 24, 2016
Made with: HTML, SCSS, JS
Tags: green-sock, animation, gsap, triangles, polygons
15. Untitled
Author: Flugg (flugg)
Links: Source Code / Demo
Created on: June 3, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
16. Infinite SVG Triangle Fusion
Triangles are created. Triangles are destroyed. And so on and so forth. What's going on here? In this pen, I am creating 60 SVGs that each contain 4 triangles (polygons). Each polygon loops through a color and animates outward from the center point of its parent SVG every 1 second. The e...Read More
Author: Rob DiMarzo (robdimarzo)
Links: Source Code / Demo
Created on: December 16, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: svg, illusion, triangle, trippy, psychedelic
17. NO TITLE FOUND
Links: Source Code / Demo
NEW 🔥 Idea to UI/UX Design In Seconds With AI 🔥
👉 Click to try it for free: UXCanvas.ai
More Awesome Lists:
Share: