You can cut down on your webpage load times by using coding instead of images when possible. Also, it’s a lot more convenient to edit/manage with just css. One of the times you can do this, is for shapes, including triangles/arrows! We are actually using just css coding to create the beige triangle/down arrow towards the middle of the UltimateWB homepage.
Here’s the coding to create blue triangles/arrow pointing in 4 different directions:
Triangle pointing up / Up arrow:
Code: Please login/register for access
Triangle pointing down / Down arrow:
Code: .downarrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid blue; }
Triangle pointing right / Right arrow:
Code: Please login/register for access
Triangle pointing left / Left arrow:
Code: .leftarrow { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid blue; }
In these examples, the sizing is defined with "px", here it is 20px.
You can also rotate these triangles/arrows using coding. just add this to your css coding for the class or id:
Code: Please login/register for access
The degree rotation is defined here by "20deg" - just change those instances to the number of degrees of rotation you want.