CSS Icon: Google Photos

Jatin Sharma•Sept 18, 2022

1 min read•159 words

I will create the Google Photos 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="yellow"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

style.css

.wrapper {
  width: 200px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
 
.yellow, .blue {
  width: 100%;
  height: 55%;
}
 
.red, .green {
  width: 55%;
  height: 100%;
}
 
.yellow {
  border-radius: 1in 1in 0 7px;
  place-self: end;
  background: #fbbc01;
}
 
.red {
  border-radius: 7px 1in 1in 0;
  background: #ea4132;
}
 
.green {
  border-radius: 1in 0 7px 1in;
  place-self: end;
  background: #069e57;
}
.blue {
  border-radius: 0 7px 1in 1in;
  background: #4086f4;
}

Codepen

🌐 Connect with me: Twitter Github Instagram Newsletter LinkedIn Website Buy 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.

Table of Contents