CSS Background Triangle Pattern – jQuery Triangularize.js

A free jQuery plugin to generate CSS based Triangle Pattern Background with custom sized triangles. Triangularize is a responsive HTML, CSS and jQuery plugin to generate awesome triangle pattern.

Plugin Overview

Plugin: Triangularize
Author: Daniel Baliczek
Licence: MIT Licence
Published: March 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 35 KB

How to Create CSS Background Triangle Pattern:

1. To getting started, load the jQuery and Triangularize’s JavaScript and CSS files into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Triangularize Js -->
<script src="src/js/triangularize.js"></script>

<!-- Triangularize CSS -->
<link rel="stylesheet" href="src/css/triangularize.css">

2. After that, create a container (a div element) in which you want to generate triangle pattern and also put your content in it.

<div id="triangle-box">
   <div class="content"> 

      ----- Your Content Goes Here -----

   </div>
</div>

Tip:Similarly, you can add this to whole body of the webpage.

3. Initialize the plugin in jQuery document ready function to active the pattern.

$(document).ready(function(){
    $("#triangle-box").trianglarize();
});

4. To change the size of triangles, pass the custom value through the following option.

$("#triangle-box").trianglarize({
   triHeight: 12,
});

5. To customize the triangle’s horizontal & vertical spacing in px. Type: int

$("#triangle-box").trianglarize({
    spacingH: 8,
    spacingV: 6
});

6. Custom color for pattern’s triangles. Type: string

$("#triangle-box").trianglarize({
     triColor: '#252525',
     triColorU: '#404040',
});