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


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.


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

   triHeight: 12,

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

    spacingH: 8,
    spacingV: 6

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

     triColor: '#252525',
     triColorU: '#404040',

Be the first to comment

Leave a Reply

Your email address will not be published.


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