Table of Contents

ProblemSolutionHTMLCSSCodepenAlternative SolutionHTMLCSSWrapping up

CSS Icon: Google Pay

Jatin Sharma

Jatin Sharma•Aug 13, 2022

3 min read•456 words

I will create the Google Pay icon in this article using CSS only. Let's look at how we do that.

Problem

problem

Solution

First, we need to create the structure for this logo then we will style that structure.

HTML

index.html

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

Let's first style the .wrapper and it's making it's all child absolute:

styles.css

.wrapper {
  display: grid;
  place-items: center;
  position: relative;
}
 
.wrapper > *{
  position: absolute;
}

Styling .blue strip:

styles.css

.blue {
  width: 140px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}

blue

Now, Styling .green strip:

styles.css

.green {
  width: 170px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(10px, -30px);
  border-radius: 0 50px 0 25px;
}

green

Now, Styling .yellow strip:

styles.css

.yellow {
  width: 170px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 50px;
  position: relative;
}
 
.yellow::before{
  position: absolute;
  content: "";
  inset:0;
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

yellow

Final strip is .red:

styles.css

.red {
  width: 140px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(18%, 49px);
  border-radius: 0 0 50px 25px;
}
 
.red::before{
  position: absolute;
  content: "";
  inset: 0;
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}

It's now done.

Codepen

You can see the codepen below:

Alternative Solution

The above solution works fine but it has a lot of repetitive code. So try the following one:

HTML

index.html

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

HTML is the same as the previous one.

CSS

styles.css

.wrapper {
  display: grid;
  place-items: center;
}
 
.wrapper > * {
  position: absolute;
  height: 80px;
}
 
.wrapper > *::before {
  position: absolute;
  content: "";
  inset: 0;
}
 
.blue, .red {
  width: 140px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}
 
.red {
  background: #2da94f;
  transform: rotate(-60deg) translate(35px, 49px);
  border-radius: 0 0 50px 25px;
}
 
.red::before {
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}
 
.green, .yellow {
  width: 170px;
  background: #2da94f;
  transform: scaleX(-1) rotate(60deg) translate(-20px, -30px);
  border-radius: 50px 25px 25px 0;
}
 
.yellow {
  background: #297aec;
  transform: scale(-1) rotate(-240deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 40px;
  position: relative;
}
 
.yellow::before {
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

Wrapping up

There are many ways to solve this. You can share your approach in the comments. If you like this then you can extend your support by Buying me a Coffee

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: