A collection of hand-picked HTML and CSS triangle background code examples.

Related Articles

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. CSS Fixed Backgrounds
  4. CSS Particle Backgrounds
  5. jQuery Background Plugins
Demo image: Two Triangles Background

Author

  • vassili

Links

Made with

  • HTML / CSS

About the code

Two Triangles Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lindsay Grizzard

Links

Made with

  • HTML / CSS (SCSS)

About the code

Triangles Animation

Background triangle animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Triangular Grid

Author

  • Ben Edwards

Links

Made with

  • CSS (Stylus)

About the code

Triangular Grid

CSS-only triangular grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Triangle Pattern

Author

  • Edmundo Santos

Links

Made with

  • CSS (SCSS)

About the code

Triangle Pattern

CSS triangle pattern background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Triangle Background Images

Author

  • Edd Yerburgh

Links

Made with

  • HTML / CSS

About the code

Responsive Triangle Background Images

Responsive triangle background images using clip-path.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Flugg

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Animated Triangles

Animated triangles for background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Russian Rebouças

Links

Made with

  • HTML / CSS (SCSS)

About the code

Random Triangle Background

Random triangle background with SASS(SCSS).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -