DEV Community

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

Posted on • Originally published at j471n.in

CSS Icon: Google Photos

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

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

Codepen

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.

🌐 Connect with me:

Twitter
Github
Instagram
Newsletter
LinkedIn
Website
Buy me a Coffee

Top comments (4)

Collapse
 
gass profile image
Gass

I don't know if you are looking for a job, but the company I work for has many opening positions, that may be of interest to you. itemis.com/en/jobs/ see also this linkedin.com/feed/update/urn:li:ac...

Collapse
 
j471n profile image
Jatin Sharma

Thanks for the suggestions mate, I'll look into it ☺️

Collapse
 
gass profile image
Gass • Edited

Hi Jatin, thanks for article : ) is good as always. I added some spin functionality to the figure, just for fun. My style approach was different. jsfiddle.net/Gass_snippets/xfyvghs...

Collapse
 
j471n profile image
Jatin Sharma

Spin was intresting, really appreciate it ✨