Sample Programs

Creating CSS Shapes



CSS Down Arrow


CSS Up Arrow


CSS Left Arrow


CSS Right Arrow


CSS Open Box


We can create shapes with CSS and here is how we can create some of the shapes. You can create any type of shapes with CSS. Check the code below.



<html>

<head><title>CSS Arrows</title>

	<style>

	 /** CSS TRIANGLES **/
	div#cssDownArrow1 { 
		font-size: 0px; line-height: 0%; width: 0px;
		border-top: 20px solid #70102D;
		border-left: 10px solid #ffffff;
		border-right: 10px solid #ffffff;
	}
	div#cssUpArrow1 {
		font-size: 0px; line-height: 0%; width: 0px;
		border-bottom: 20px solid #70102D;
		border-left: 10px solid #ffffff;
		border-right: 10px solid #ffffff;
	}
	div#cssLeftArrow1 {
		font-size: 0px; line-height: 0%; width: 0px;
		border-right: 20px solid #70102D;
		border-top: 10px solid #ffffff;
		border-bottom: 10px solid #ffffff;
	}
	div#cssRightArrow1 {
		font-size: 0px; line-height: 0%; width: 0px;
		border-left: 20px solid #70102D;
		border-top: 10px solid #ffffff;
		border-bottom: 10px solid #ffffff;
	}

	div#cssOpenBox {
		width:50px; height:50px;
		border-top:10px solid #C2762B;
		border-right:10px solid #AAC32B;
		border-bottom:10px solid #C2C2C2;
		border-left:10px solid #3D3D3D;
	}


	</style>
</head>


<body>

	<h4> CSS Down Arrow </h4> <br>
	<div id="cssDownArrow1"></div></br>

	<h4>CSS Up Arrow </h4> <br>
	<div id="cssUpArrow1"></div></br>

	<h4>CSS Left Arrow </h4> <br>
	<div id="cssLeftArrow1"></div></br>

	<h4>CSS Right Arrow </h4> <br>
	<div id="cssRightArrow1"></div></br>

	<h4>CSS Open Box </h4> <br>
	<div id="cssOpenBox"></div></br>

</body>
</html>



blog comments powered by Disqus