CSS 아이콘: Google Pay

이 기사에서는 CSS만 사용하여 Google Pay 아이콘을 만들겠습니다. 어떻게 하는지 살펴보겠습니다.

문제

해결책

동영상

먼저 이 로고의 구조를 만든 다음 해당 구조의 스타일을 지정합니다.

HTML

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

먼저 .wrapper의 스타일을 지정하고 모든 자식을 절대적으로 만듭니다.

.wrapper {
  display: grid;
  place-items: center;
  position: relative;
}

.wrapper > *{
  position: absolute;
}

스타일링.blue 스트립:

.blue {
  width: 140px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}

이제 스타일링.green 스트립:

.green {
  width: 170px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(10px, -30px);
  border-radius: 0 50px 0 25px;
}

이제 스타일링.yellow 스트립:

.yellow {
  width: 170px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 50px;
  position: relative;
}

.yellow::before{
  position: absolute;
  content: "";
  inset:0;
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

최종 스트립은 .red입니다.

.red {
  width: 140px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(18%, 49px);
  border-radius: 0 0 50px 25px;
}

.red::before{
  position: absolute;
  content: "";
  inset: 0;
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}

이제 끝났습니다.

코데펜

아래 코드 펜을 볼 수 있습니다.

대체 솔루션

위의 솔루션은 잘 작동하지만 반복되는 코드가 많습니다. 따라서 다음을 시도하십시오.

HTML

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

HTML은 이전 것과 동일합니다.

CSS

.wrapper {
  display: grid;
  place-items: center;
}

.wrapper > * {
  position: absolute;
  height: 80px;
}

.wrapper > *::before {
  position: absolute;
  content: "";
  inset: 0;
}

.blue, .red {
  width: 140px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}

.red {
  background: #2da94f;
  transform: rotate(-60deg) translate(35px, 49px);
  border-radius: 0 0 50px 25px;
}

.red::before {
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}

.green, .yellow {
  width: 170px;
  background: #2da94f;
  transform: scaleX(-1) rotate(60deg) translate(-20px, -30px);
  border-radius: 50px 25px 25px 0;
}

.yellow {
  background: #297aec;
  transform: scale(-1) rotate(-240deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 40px;
  position: relative;
}

.yellow::before {
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

마무리

질문이 있으시면 아래에 의견을 남겨주십시오. 이것은 일련의 CSS 아이콘이므로 더 많은 기사를 보려면 팔로우하십시오. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음편에서 뵙겠습니다.