CSS 로고 html 및 css만 있는 Google 로고
먼저
div
를 id
로 html에 google
를 배치합니다.<div id="google"></div>
그런 다음 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: #FFFFFF;
width: 300px;
height: 300px;
padding: 0;
margin: 10vh auto 0;
}
그러면 4개의 Google 색상이 있는 원이 남게 됩니다. 그것을 'G'로 바꾸려면 아래 코드를 입력하십시오.
#google::before {
content: "";
z-index: 100;
position: absolute;
top: 50%;
right: -95px;
transform: translateY(-50%);
width: 245px;
height: 100px;
background: #4285F4;
}
#google::after {
content: "";
z-index: 101;
position: absolute;
border-top: 200px solid transparent;
border-right: 200px solid #FFFFFF;
top: -100px;
right: -100px;
width: 0;
height: 0;
}
짜잔, 방금 HTML과 CSS만 사용하여 Google 로고를 만들었습니다. ✌️
Reference
이 문제에 관하여(CSS 로고 html 및 css만 있는 Google 로고), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rs9110/google-logo-with-just-html-css-3bmi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)