Wagner's Web Design

If you are viewing this post in an email, you will have to visit the post to see the images.

You can create a triangle using CSS border property. The trick is when you us different color borders they come together as a point. Below is an example of the four different color borders. As you can see it gives the point as the borders come together.

So the question I asked myself was, “How can I use this to my advantage?”. I found that I could create arrows without images. Below is example of what any arrow would look like with CSS.

Here is the code that creates this effect

.borders{
border-color: transparent green transparent transparent;
border-style:solid;
border-width: 15px;
width: 0;
height: 0
}

Just remember when using four values in a single property, like in the border-color property, the first value is the bottom and then clock wise from that point.

I have tested the css property in all major browsers, and seems to work great!

Have you ever noticed fonts in FireFox are hard to read or blurry. The culprit to this issue is Helvetica Neue fonts. I keep this in mind when I’m designing for the web. Take care when you design for any thing that is using html for the web. Choose your fonts carefully. From my research I have found this to be FireFox running on a PC issue. I can not replicate the problem on an apple product running FireFox. This is example of what the fonts will look like.

Why I think this is the culprit?

I was able to correct the issue when I used firebug to remove the font-family Helvetica Neue. After removing the Helvetica Neue. This is the results I ended up with.

As you can see the difference in the fonts. I would never have believed this if i had not done the research to find this issue.