CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,088 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,206 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Simpel Tringle in CSS and how to use them

Simpel Tringle in CSS and how to use them

Options

J0K3R

12 May, 2009 - 03:46 AM

Post #1

Well. I found this on the net couple of weeks ago and thought I would share it.

Here: CSS Triangles

Triangle effect in CSS is accomplished by setting all 4 borders seperatly then defining certain settings:

Width and height is set to 0px;

explanation:

basicly what happens, when you give borders to a div, where it connects is a diagonal line:

IPB Image

when creating a Css triangle you specify 3 borders and the forth you set to 0px;
This means that border will be non existent. by setting the width and height of the block to 0 there will be nothing to create a border around,

You set the width of the block by setting the width of the border.

THIS means the border will keep on going till the width is set. and Because there is no 4th border the other three will meet on one side, thus creating a triangle:

IPB Image

example of a div:

CODE

#tri {
    width:0;
    height:0;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 0;
    border-left: 40px solid blue;
}

Have a look at an example on usage on a List Menu:

Simple CSS Triangle

CSS Code for Menu:

CODE

li {
    width:0;
    height:0;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 0;
    border-left: 5px solid blue;
    list-style:none;
    margin-bottom:10px;
    float:none;
    position:relative;
}

li:hover {
    width:0;
    height:0;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 0;
    border-left: 10px solid blue;
}

li span.title {
    padding-left:10px;
    width:100px;
    height:20px;
    margin-top:-10px;
    float:left;
    position:relative;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10pt;
}

HTML for Menu:

CODE

<ul>
 <li>Home</li>
 <li>Products</li>
 <li>Portfolio</li>
 <li>Contact Us</li>
</ul>

Furhter styling can be done from here for example bg added and so forth.