zombievirus

Slants are a trick you can do with CSS to create diagonals. You make them with borders. The squares below are made with CSS and no images.

The code for this is:

 
<style>
.colors {
border-color:#6A3D5A #66666E #6D8D76 #B0C65A;
border-style: solid; 
border-width: 50px; 
margin: 10px; 
width: 0px; 
height: 0px; 
line-height: 0px;
}
</style>
 
<div class="colors"><!-- --></div>

Messing around with the border width will change the angle of the slang. Below I have it set to: border-width: 13px 50px 87px;

The only way I can get my head around creating geometrical shapes with CSS is knowing that all shapes start out in a box, and parts of the shape will hide and show depending on what you set the border-color.

If I took the above div and set the border-color to border-color:#fff #fff #6D8D76; I get a triangle!

What awesome things can you make out of triangles? STARS.
I made the following using 9 divs. All divs have their borders set to transparent and then depending on their location, I added a class to add color to one side of the border. (ie- right triangle border-right-color:#B0C65A;)
The bottom part is more tricky. There are 4 divs layered on top of each other. The slanted edges are created by layering a div with a white border on top of a div with a green one.
If you look at it in firebug, you can see what I did

With css3 and border radius you can made circles just using css. And if you can make circles… you can make sweet ven diagrams like below

 
.round{ 
    background-color:#6A3D5A;
    border-radius: 100px; /* all corners have a radius of 5px */
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
    width:200px;
    height:200px;
    opacity:0.6;
}