CSS Icon: Microsoft
In this article, I will create a Microsoft icon by using CSS only. Let's look at how we do that.
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="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>The above HTML code has a wrapper container and it has four children red, green, blue, and yellow.
CSS
Now let's style them one by one. First, let's style the wrapper container. I've created a two-column grid and managed spacing by using gap property.
styles.css
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}Now we style all the children by Universal Selector (*) and give them 50px height and width.
styles.css
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.wrapper > * {
width: 50px;
height: 50px;
}It's time to apply the colors to the individual children.
styles.css
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.wrapper > * {
width: 50px;
height: 50px;
}
.red {
background: #f44336;
}
.green {
background: #4caf50;
}
.blue {
background: #2196f3;
}
.yellow {
background: #ffc107;
}Codepen
Now the result is as follows: