Create GeeksforGeeks logo using HTML and CSS

Last Updated : 21 May, 2024

Creating a logo using HTML and CSS involves designing graphical elements with HTML tags, styling them using CSS properties such as colors, sizes, and positions, and possibly incorporating SVG graphics or images. This approach allows for custom, scalable, and interactive logo designs on web pages.

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, use two inline divs for circles, wrapped in a flex-display wrapper div. Apply a 10px solid green border for the outline.

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>