HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>How to create a Google logo using HTML and CSS</title> </head> <body> <div id="google-logo-div"> </div> </body> </html>
CSS
body{ display:grid; place-items:center; min-height:100vh } #google-logo-div { position: relative; border-top: 50px solid #EA4335; border-right: 50px solid #4285F4; border-bottom: 50px solid #34A853; border-left: 50px solid #FBBC05; border-radius: 50%; background-color: #FFFFFF; width: 150px; height: 150px; padding: 0; } #google-logo-div::before { content: ""; z-index: 100; position: absolute; top: 50%; right: -42.5px; transform: translateY(-50%); width: 122.5px; height:50px; background: #4285F4; } #google-logo-div::after { content: ""; z-index: 105; position: absolute; border-top:46px solid transparent; border-right:105px solid #fff; top: -27px; right: -47px; width: 90px; height: 31px; }
JS
Google logo using HTML and CSS