Google chrome logo using HTML and CSS

HTML

CSS

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
}
.chrome-logo {
	width: 350px;
	height: 350px;
	background: #ffeb00;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
}
.center {
	width: 140px;
	height: 140px;
	background: #4885ed;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 25px solid #fff;
	z-index: 1;
}
.red-area {
	width: 86%;
	height: 82px;
	background: #ff262c;
	position: absolute;
	right: 0;
}
.red-area:after {
	content: '';
	width: 120px;
	height: 192px;
	background: #ff262c;
	position: absolute;
	top: 28px;
	transform: skew(22deg);
	left: 4px;
	z-index: 0;
}
.green-area {
	width: 86%;
	height: 82px;
	background: #3cba54;
	position: absolute;
	left: -107px;
	bottom: 0;
	transform: rotate(69deg);
	top: 170px;
}
.green-area:after {
	content: '';
	width: 164px;
	height: 172px;
	background: #3cba54;
	position: absolute;
	top: -114px;
	transform: rotate(40deg) skew(27deg);
	right: -38px;
	z-index: 0;
}

JS