Antoneo’s Posterous

Creating Triangles in CSS

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.

Demo

How it works

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.

 1 1 <div class="css-arrow-multicolor"></div>
 2  2 
 3  3 .css-arrow-multicolor {
 4  4   border-color: red green blue orange;
 5  5   border-style:solid;
 6  6   border-width:20px;
 7  7   width:0;
 8  8   height:0;
 9  9 }

Simple trick for CSS arrows.

Just when the H.264 video codec is starting to take over a large portion of new Web videos, along comes Google to shake things up again. Today, along with Mozilla and Opera, it is launching the WebM Project, an open, royalty-free codec that can run in HTML5 browsers without the need for Flash.

Great, another video format to support.. surely it would just be cheaper to pay the H.264 licensing fees (if they ever charge a fee) than encode and store 3 more times.

A nice etsy style site for anyone in the UK looking for an alternative that supports £ and international shipping.

IE now running on Mac without windows, makes testing sites easier!

Nice free thumbnail web service.

Trying out my new Posterous account!