Значок CSS: Google Pay

В этой статье я создам иконку Google Pay, используя только CSS. Давайте посмотрим, как это сделать.

Содержание

Проблема
Решение
Видео
HTML
CSS
Codepen
Альтернативное решение
HTML
CSS
Подведение итогов

Проблема

Решение

Видео

Сначала нам нужно создать структуру для этого логотипа, а затем стилизовать эту структуру.

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 strip:

.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;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь все готово.

Codepen

Кодепен можно посмотреть ниже:

Альтернативное решение

Приведенное выше решение работает хорошо, но в нем много повторяющегося кода. Поэтому попробуйте следующий вариант:

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, поэтому следите за новыми статьями. Если вам понравилось, не забудьте поставить ❤️. И до встречи в следующей статье.