UltimateWB
Do MORE, FASTER, EASIER, & BETTER!
Login    Register    Forgot Password?

Styling
Custom CSS coding help - get help on custom css (styling) coding here
Subscribe to new posts
Post Icon
CSS Tricks - How to create triangles with just css

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.

Official UWB Support Team! Contact us directly here!

Similar Topics
 
Topic / Topic Starter
Rating
Last Post
Replies
Views
Forum
Post Icon
-
Post Icon
UltimateWB software 4.3 available: social networking updates & responsive app upgrade
2 years ago
0
7545
Post Icon
-
Post Icon
Ning vs UltimateWB comparison chart: UltimateWB has more features, options, flexibility
1 year ago
1
3872
Post Icon
-
Post Icon
Re: Allowing user to edit profile / display user fields on public profile page - Placeholder Text
3 years ago
3
6475
Post Icon
-
Post Icon
Re: Listings Directory App: How to add more locations, states/cities?
4 years ago
1
4927
Post Icon
-
Post Icon
Re: Classifieds ads website, software questions, Open Classifieds software alternative
2 years ago
1
11993
Report forum post by:
Report a concern
Comments: