Create GeeksforGeeks logo using HTML and CSS
Last Updated :
30 Jan, 2024
GeeksforGeeks is an online study platform and we will see how to design a GeeksforGeeks logo using HTML and CSS only.
Steps:
Step 1: To create the GFG logo, first we take two divs (which are inline) and make circles with them. But the div elements are block-level that’s why we wrap both the divs with a wrapper div and make that div (wrapper) display flex. Apply border with 10px solid colored green. You will get something like this.
Step 2: Now create a triangle on both the circles using the pseudo-element: “after” and absolute position property. After applying the triangle we will get the shape like this.
Here the triangle’s background-colors are yellow, this is just for explanation. Change the background-color of triangles into white.
After applying the white background color into the triangles the result is :
Step 3: Now using the pseudo-element :before and position absolute property, create a square. You can apply this rule to any of the circles. The resulting logo looks like this:
Approach:
- Create two divs having classes named circle1 and circle2, and wrap them into a parent div having the class named wrapper.
- Now assign the CSS property to the wrapper class and style both the circlesÂ
- Add the invisible triangles into both the circles using pseudo-element :after
- Now add square onto the logo using before pseudo-element (we are not using after (pseudo-element) because we already used it for creating triangle).
Example: In this code we will see the implementation of geeksforgeeks logo using htnl and CSS .
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.wrapper {
display: flex
}
#circle {
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 100px;
position: relative;
}
#circle:after {
content: "";
position: absolute;
border-top: 100px solid transparent;
top: -35px;
}
.circle1:after {
border-left: 140px solid white;
left: -50px;
top: -35px;
}
.circle2:after {
border-right: 140px solid white;
right: -50px;
}
.circle1:before {
content: "";
height: 20px;
width: 276px;
position: absolute;
background: green;
left: -18px;
top: 45px;
z-index: 1;
}
</ style >
</ head >
< body >
< div class = "wrapper" >
< div id = "circle" class = "circle1" ></ div >
< div id = "circle" class = "circle2" ></ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...