Page 1 of 1

Simpel Tringle in CSS and how to use them Rate Topic: -----

#1 J0K3R  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 13
  • View blog
  • Posts: 298
  • Joined: 19-December 08

Posted 12 May 2009 - 04:46 AM

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:

Posted 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:

Posted Image

example of a div:


#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:


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:


<ul>
			<li><span class="title">Home</span></li>
			<li><span class="title">Products</span></li>
			<li><span class="title">Portfolio</span></li>
			<li><span class="title">Contact Us</span></li>
</ul>




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

Is This A Good Question/Topic? 2
  • +

Page 1 of 1