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.

Top comments (4)

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 Author • Edited on

Take your time mate ✨

Collapse
 
gass profile image
Gass

what do you mean by that ? 😅

Thread Thread
 
j471n profile image
Jatin Sharma Author

Time had passed. I meant time 😂

🌚 Life is too short to browse without dark mode