sad cow

web design, jQuery plugins, web tools and general stuff about the internet by matt squirrell.
not exactly unique but hopefully better...

RSS Feed

CSS Shapes

Everyone knows that you can make squares and rectangles in CSS. But did you know you can make circles and triangles too?

It's all about the borders, as they have angled edges - look at the box below to see what I mean:

I am a box!


Do you see how the edges of the borders are at 45 degrees? Now, take a look what happens when we set the height and width of the div to zero pixels:



There we are - four triangles. If you only wanted to display one, just make the colour of the other three transparent, like so:

<style>.triangle {

    width: 0;

    height: 0;

    border-color: transparent;

    border-width: 30px;

    border-style: solid;

    border-top-color: red;

}</style>



<div class="triangle"></div>


Now, I know what you're thinking - "That's a neat trick. And?".
Well, if you can make rectangles and triangles, you can make arrows, all with no images at all. You can even make more complicated things, like menus:

Menu 1
Menu 2
Menu 3
Menu 4



Hopefully that has got you feeling creative - take a look at the demo page using the button on the right to see how this is all made - it's not as complicated as you might think.

You can "draw" pretty much anything this way - I bet you can even draw a CSS car or house if you were so inclined. I might even have a crack at doing so myself one day.

But what about circles? Simply set the border-radius CSS property to be the same as the border width:



And there you have it - four chunks of circle. If you made all the borders the same colour, you'd be left with just a circle.

Alarm Clock Download
PHP Nowdoc String Enclosing
:(

I am Matt Squirrell.

And this is the sort of thing I do.

I can design and build rich, feature-filled websites like this one. Ask me nicely and I might even do it with less than 700KB of images.

I started this website because I'm constantly coming up with neat little fixes, chunks of code, plugins or tricks, and then forgetting about them in a week. This is as much for me as it is for you (but it certainly is nice to share bits and pieces with other people).

It will also serve as a central point for all the other things I have done that have found their way to the Internet - from strange MMO God-sims to a 'Choose your own adventure' maker.

You are more than welcome to hire me if you've got your own web project you want to do - if you can think it I can pretty much make it. I'm cheaper than paying someone from the bargain basement to do it and then having to pay someone good to fix all the problems, too!

Anyway, until I think of a better way to sign off, I only hope you found something useful up there above ground.

Click on the cow ;o)

Contact me. If you like.

Valid XHTML 1.1