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 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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...