Google chrome logo created with a single HTML element.

index.html

<code class="chrome-logo"></code>

style.css

.chrome-logo{
  display: block;
  position:relative;
	width: 450px;
	height: 450px;
	overflow: hidden;
	margin: 80px auto 0;
	border-radius: 400px;
	box-shadow: inset 0px 0px 160px rgba(0,0,0,0.05);
	background-image: -webkit-linear-gradient(210deg, transparent 66.4%, #4DB849 33%, #328440),
			          -webkit-linear-gradient(90deg, transparent 72%, #D01D21 33%, #F06B59),
			          -webkit-linear-gradient(150deg, transparent 60%, #D01D21 33%, #D01D21),
			          -webkit-linear-gradient(330deg, transparent 66.45%, #FCD209 33%, #D49B28),
			          -webkit-linear-gradient(37deg, transparent 58%, #FCD209 33%, #FCD209),
			          -webkit-linear-gradient(280deg, transparent 58%, #4DB849 33%, #4DB849),
			          -webkit-linear-gradient(150deg, transparent 54%, #D01D21 33%, #D01D21);
	box-shadow: inset 0px 0px 160px rgba(0,0,0,0.05), 
				0px 0px 100px rgba(0,0,0,0.05), 
				0px 0px 10px rgba(255,255,255, 1.0);
	-webkit-transition: all 1s ease-in-out;
}

.chrome-logo:after{
	content: '';
	display: block;
	width: 170px;
	height: 170px;
	position: absolute;
	top: 0;
	left: 141px;
	margin: 141px auto 0;
	border-radius: 200px;
    box-shadow: 0px 0px 0px 15px rgba(255,255,255,1.0);
    background-image: -webkit-radial-gradient(center -10%, 100% 100%, #7eb2df 10%, #0d5a94 110%);
}

.chrome-logo:before{
	content:'';
	display: block;
	position: absolute;
	top: 423px;
	left: 218px;
	width: 25px;
	height: 38px;
	background: #FCD209;
	background-image: -webkit-linear-gradient(305deg, rgba(243, 206, 9, 0.95) 33%, #E1AC25);
	border-bottom-right-radius: 200px;
	-webkit-transform: rotate(30deg);
}

.chrome-logo:hover {
    -webkit-transform: rotate(-720deg) scale(0.9);
}