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

CSS Triangle Backgrounds - 2 triangles background
Author: vassili (alivim)
Created on: January 25, 2018
Made with: HTML, CSS

2. Triangles Animation

CSS Triangle Backgrounds - Triangles Animation
Author: Lindsay Grizzard (lindsayrusd)
Created on: January 11, 2017
Made with: HTML, SCSS

3. CSS-only Triangular Grid

CSS Triangle Backgrounds - CSS-only triangular grid
Author: Ben Edwards (benedfit)
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

CSS Triangle Backgrounds - CSS triangle pattern background
Author: Edmundo Santos (edmundojr)
Created on: July 19, 2016
Made with: SCSS
Tags: pattern, triangle, background, css, seamless

5. Responsive Triangle Background Images

CSS Triangle Backgrounds - Responsive Triangle Background Images
Responsive triangle background images using clip-path
Author: Edd Yerburgh (eddyerburgh)
Created on: December 1, 2015
Made with: HTML, CSS
Tags: clip-path, responsive, fullscreen triangle

6. Untitled

CSS Triangle Backgrounds - Untitled
Author: Flugg (flugg)
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

CSS Triangle Backgrounds - Random Triangle Background
Author: Russian Rebouças (Russian60)
Created on: February 1, 2014
Made with: HTML, SCSS
Tags: scss, triangles, random, background

8. Background Pattern - SCSS

CSS Triangle Backgrounds - Background Pattern - SCSS
Author: Heidi Chan (hckkiu)
Created on: August 24, 2020
Made with: HTML, SCSS
Tags: background, pattern, strips, dotted, triangle

9. CSS Triangle Image Crop

CSS Triangle Backgrounds - CSS Triangle Image Crop
Author: Michael Hobizal (mikehobizal)
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

CSS Triangle Backgrounds - CSS Fractured Triangle Background
Author: IPRESSBUTTON (ildarmgt)
Made with: HTML, CSS

11. CSS Triangle Background

CSS Triangle Backgrounds - CSS Triangle Background
Author: Jaymar G. Aranas (jaymar-g-aranas)
Made with: HTML, CSS

12. Triangle Circle Square Animated Hero Background

CSS Triangle Backgrounds - Triangle Circle Square Animated Hero Background
Author: Stephen Nixon (thundernixon)
Created on: May 6, 2016
Made with: HTML, CSS

13. Triangle Loading Animation

CSS Triangle Backgrounds - Triangle Loading Animation
A rather simple Loading animation using only a few CS triangles and animations
Author: Felix Rilling (FelixRilling)
Created on: September 18, 2015
Made with: HTML, SCSS
Tags: css, ui, loading, load

14. Swirling Triangles (Green Sock Animation)

CSS Triangle Backgrounds - 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)
Created on: February 24, 2016
Made with: HTML, SCSS, JS
Tags: green-sock, animation, gsap, triangles, polygons

15. Untitled

CSS Triangle Backgrounds - Untitled
Author: Flugg (flugg)
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

CSS Triangle Backgrounds - 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)
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