Google logo

google-logo.markdown

Google logo

A Pen by Matthew Daniel Brown on CodePen.

License.

index.html

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

style.css

 #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;
           
        }

        #google::before {
            content: "";
            z-index: 100;
            position: absolute;
            top: 50%;
            right: -95px;
            transform: translateY(-50%);
            width: 245px;
            height: 100px;
            background-color: #4285f4;
        }
        
        #google::after {
            content: "";
            z-index: 101;
            position: absolute;
            border-top: 200px solid transparent;
            border-right: 200px solid #fff;
            top: -100px;
            right: -100px;
            width: 0;
            height: 0;
        }