CSS 로고 html 및 css만 있는 Google 로고

4637 단어 htmlcsstutorialwebdev
따라서 HTML과 CSS만으로 Google 로고를 만드는 방법은 다음과 같습니다.

먼저 divid 로 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 로고를 만들었습니다. ✌️

좋은 웹페이지 즐겨찾기