bhargav2785

/* Curved arrow */

.curved-arrow{
	position: relative;
	left: 100px;
	top: 100px;
	width: 0;
	height: 0;
	border-right: 12px solid red;
	border-top: 12px solid transparent;

bhargav2785

/** Pure CSS wave effect **/
div.wave{
	position: relative;
	width: 100%;
}
div.wave > span{
	float: left;
	width: 10%;
	height: 200px;
	animation: animate 1.5s ease-in-out alternate infinite;

bhargav2785

/*
	Right angle triangles 
*/
.right-angle-top-left{
	position: relative;
	margin: 30px;
	width: 0;
	border-right: 100px solid transparent;
	border-top: 100px solid red;
}

bhargav2785

div.chart-up{
	background-color: #D33682;
	border: 1px solid #EEE;
	border-top-left-radius: 50%;	
	border-top-right-radius: 50%;
}
div.chart-down{
	background-color: #D33682;
	border: 1px solid #EEE;
	border-bottom-left-radius: 50%;	

bhargav2785

/** TRON Clock **/
body{
	background-color: black;
}
.tron{
	position: relative;
	width: 300px;
	height: 300px;
}
.tron > span:nth-child(odd){

bhargav2785

/**
	Understanding transition on various browsers
**/
.animate{
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: red;
	
	-webkit-transform: rotate3d(0,1,0,360deg);

bhargav2785

/**
	Understanding transition on various browsers
**/
.animate{
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: red;
	
	transform: rotate3d(0,1,0,360deg);

bhargav2785

/** Round introduction badge **/
.round-container{
	background-image: url(///farm8.staticflickr.com/7032/6455698491_3b0cbcf7e3_s.jpg);
	width: 200px;
	height: 200px;
	background-size: 100% 100%;
	border-radius: 50%;
	box-shadow: inset 0px 0px 1px 15px rgba(255,255,255,.5); 
	transition: all .5s ease;
}

bhargav2785

/** Background **/

background: linear-gradient(bottom, 
	#333 50%, transparent 50%,
	#777 100%);
height: 100%;	

bhargav2785

/**
 * CSS shapes
 */
 .shape{
 	margin: 20px auto;
 }
.trapezoid{
	position: relative;
	width: 200px;
	height: 200px;