Google logo create on css for web design

hello everyone, how to create google logo using the only CSS, i get this code on codepen. I like this code because there use the only CSS no SVG no javascript. very easy to implement on your any website. google logo css use on your website.

HTML

<div class="google-logo"></div>

CSS

/*-------- Blue color --------*/
.google-logo{
  margin:150px auto 0;
  width:75px;
  height:50px;
  border-top:50px solid #4285f4;
  border-right:50px solid #4285f4;
  border-bottom:50px solid #4285f4;
  border-radius:0 0 250px 0;
  position:relative;
  box-sizing:content-box;
}

/*-------- Red Green Yellow Color --------*/
.google-logo:before{
  content:"";
  display:block;
  width:250px;
  height:250px;
  border-top:50px solid #ea4335;
  border-right:50px solid transparent;
  border-bottom:50px solid #34a853;
  border-left:50px solid #fbbc05;
  border-radius:200px;
  box-sizing:border-box;
  position:absolute;
  top:-150px;
  right:-50px;
 }
Leave a Reply