Create Retro Triangle Pattern Using jQuery - Triangularize.js

Create Retro Triangle Pattern Using jQuery - Triangularize.js

The Triangularize.js jQuery plugin makes use of JavaScript and CSS to generate a retro pattern of triangles for the background image of a given container.

1. Import jQuery library and the Triangularize.js script into the document.

<script src="" 
<script src="src/js/triangularize.js"></script>

2. Call the function on the target element in which you want to generate the triangle pattern.

<div id="triangle-box">

3. Customize the triangle pattern by overriding the default parameters as follows.

    // height
    triHeight: 100,
    // space between triangles
    spacingV: 0,
    spacingH: 0,
    // colors
    triColor: "#00DDFF",
    triColorU: "#DD00FF",
    // direction
    startUpsdwn: false

This awesome jQuery plugin is developed by MrDev-io. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 27.04.2019
  • Source