DEV Community

Cover image for CSS Icon: Google Pay
Jatin Sharma
Jatin Sharma

Posted on • Originally published at j471n.in

CSS Icon: Google Pay

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

Problem

problem

Solution

Video

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

HTML

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

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

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

.wrapper > *{
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Styling .blue strip:

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

blue

Now, Styling .green strip:

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

green

Now, Styling .yellow strip:

.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;
}
Enter fullscreen mode Exit fullscreen mode

yellow

Final strip is .red:

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

HTML is the same as the previous one.

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;
}
Enter fullscreen mode Exit fullscreen mode

Wrapping up

If you have any queries, feel free to drop a comment below. This is a series of CSS Icons so make sure you follow for more such articles. If you like this then don't forget to โค๏ธ it. And I'll see you in the next one.

Oldest comments (6)

Collapse
 
gass profile image
Gass

This one is tough. I'll try it out when I have time. Thanks for sharing ๐Ÿ‘

Collapse
 
j471n profile image
Jatin Sharma • Edited

Take your time mate โœจ

Collapse
 
gass profile image
Gass

what do you mean by that ? ๐Ÿ˜…

Thread Thread
 
j471n profile image
Jatin Sharma

Time had passed. I meant time ๐Ÿ˜‚

Collapse
 
fersadilala profile image
Lora

not bad

Collapse
 
mirandadad2 profile image
Kira Loiser • Edited

The icon looks great. Well written code. I just recently read about google pay casinos, I found casinosanalyzer.com/online-casinos... for this. I also learned that another system may appear soon. But I donโ€™t think it will outperform its competitors in terms of ratings. Still, the level is completely different.