Creating Triangle Backgrounds: A Step-by-Step Guide
If you’re hoping to create triangle backgrounds for one of your web pages, you’ve come to the right place! In this guide, we’re going to be taking a look at how to create a gradient triangle background, where the triangles’ colors move from a burgundy color to a darker, purple hue.
Of course, a huge variety of combinations can be created too, from turquoise variants to backgrounds with warmer, summer hues.
Here's the background we'll be making:
For this project, we’re going to be using React, but if you'd like to see this tutorial with a different framework, be sure to let me know down in the comments section below!
Firstly, let's create a React project:
After this has been created, we need to install our dependencies:
Then once our dependencies are installed, it’s time to start up the development server. This will automatically reload the page and apply any changes that were made as we work on our App.js file.
After the server is up and running, head over to https://localhost:3000 and you should see the default page, which consists of a spinning logo, but we're soon about to change that!
Adding A Triangle Background
To create our triangle background, we’ll need to import Triangulr.js:
We'll also be using React refs in this tutorial, so we'll need to import the useRef hook also:
Then in the JSX for the component, it's time to add a div element, which will be the container for the triangle background:
In order to add a gradient effect to the triangle background, a function needs to be added which selects a color for the current triangle based on its position. This is then called every time a triangle is created and added to the background, and a hex color code is returned each time.
In our useEffect hook, we’ll need to set up a Triangulr instance, get the container where we want to append the background using the ref we set up earlier, and then append the triangle background. The height and width of the background will also need to be set when creating a Triangulr instance, as shown below:
I’ve noticed that some faint lines appear between the triangles, so if you’d like to detract from these somehow, you could do so by placing a gradient background behind the triangles, as so:
And voila! The final background looks like this:
Thanks for reading! These triangle backgrounds would look fantastic in a variety of contexts, from hero banners to login screens and signup pages. If you'd like to create variations of this background, you could try out different colors and gradients. For example, you could try a blue and turquoise background, which would look amazing overall!
If you'd like to share your creations, be sure to let us know on Twitter or down in the comments section below. Thanks again!