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

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>

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;
}

Styling .blue strip:

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

Now, Styling .green strip:

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

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;
}

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;
}

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>

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;
}

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.