CSS Background Triangle Pattern – jQuery Triangularize.js

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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',
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.