Google pay logo using HTML and CSS

HTML

CSS

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.google-pay {
	display: grid;
	place-items: center;
	position: relative;
	margin-top: 7rem;
}
.google-pay > * {
	position: absolute;
}
.blue {
	width: 140px;
	height: 80px;
	background: #297aec;
	transform: rotate(-60deg) translate(-35px, -70px);
	border-radius: 50px 25px 25px 0;
}
.green {
	width: 170px;
	height: 80px;
	background: #2da94f;
	transform: scalex(-1) rotate(60deg) translate(-20px, -30px);
	border-radius: 50px 25px 25px 0;
}
.yellow {
	background: yellow;
	width: 170px;
	height: 80px;
	background: #297aec;
	transform: rotate(-60deg) translate(-20px, 10px);
	border-radius: 0 25px 25px 40px;
	position: relative;
}
.yellow::before {
	position: absolute;
	content: "";
	inset: 0;
	background: #fdbd00;
	border-radius: 50px 25px 25px 50px;
	z-index: 1;
}
.red {
	background: #2da94f;
	width: 140px;
	height: 80px;
	transform: rotate(-60deg) translate(25%, 49px);
	border-radius: 0 0 50px 25px;
}
.red::before {
	position: absolute;
	content: "";
	inset: 0;
	background: #ea4335;
	border-radius: 0 50px 50px 25px;
	z-index: 1;
}

JS