CSS箭頭--CSS Triangles Example

div#up {
			width:0px; 
			height:0px; 
			border-left:5px solid transparent;  /* left arrow slant */
			border-right:5px solid transparent; /* right arrow slant */
			border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
		}
		div#down {
			width:0px; 
			height:0px; 
			border-left:20px solid transparent;  /* left arrow slant */
			border-right:20px solid transparent; /* right arrow slant */
			border-top:20px solid #f00; /* top, add background color here */
		}
		div#right {
			width:0px; 
			height:0px; 
			border-top:60px solid transparent;  /* left arrow slant */
			border-bottom:60px solid transparent; /* right arrow slant */
			border-left:60px solid green; /* top, add background color here */
		}
		div#left {
			width:0px; 
			height:0px; 
			border-top:10px solid transparent;  /* left arrow slant */
			border-bottom:10px solid transparent; /* right arrow slant */
			border-right:10px solid yellow; /* top, add background color here */
		}

<h1 style="margin-top:20px;">CSS Triangles Example</h1>
	<p>Check out the awesome CSS triangles below. Nothing but pure CSS!</p>
	<div id="position:relative;">
	<!-- UP -->
	<div id="up"></div>
	<br />
	<!-- DOWN -->
	<div id="down"></div>
	<br />
	<!-- LEFT -->
	<div id="left"></div>
	<br />
	<!-- RIGHT -->
	<div id="right"></div>
	</div>