Creating Google logo by using just HTML and CSS.

 

Step 1:

Create a div element and give it id as google..

  <div id="google"></div>

Step 2 :

Style the div element by selecting its id ..code is given below:

 #google{

            position: relative;

            border-top: 100px solid #ea4335;

            border-right: 100px solid #4285f4;

            border-bottom: 100px solid #34a853;

            border-left: 100px solid #fbbc05;

            border-radius: 50%;

            background-color: #fff;

            width: 300px;

            height: 300px;

            padding: 0;

            margin: 10vh auto 0;

        }

Step 3 :

Use before pseudo selector on the #google element

  #google::before{

            content: "";

            z-index: 100;

            position: absolute;

            top: 50%;

            right: -95px;

            transform: translateY(-50%);

            width: 245px;

            height: 100px;

            background-color: #4285f4;

        }

Step 4 :

Use after pseudo selector on the #google element

        #google::after{

            content: "";

            z-index: 101;

            position: absolute;

            border-top: 200px solid transparent;

            border-right: 200px solid white;

            top: -100px;

            right: -100px;

            width: 0;

            height: 0;

            

        }