CSS Battle: #7 — Лиственная тропа

В этой статье я решу CSS-задачу Leafy Trail на CSS Battle. Сначала давайте рассмотрим проблему.

Проблема

Нам нужно создать следующий контейнер, используя только свойства CSS:

Решение

Теперь посмотрим на решение и на то, как мы этого добьемся.

HTML

<div class="leaf left"></div>
<div class="leaf middle"></div>
<div class="leaf right"></div>

CSS

Теперь давайте оформим листья.

body{
  margin: 0;
  background: #0B2429;
  display: grid;
  place-items: center;
}   
.leaf {
  position: absolute;
  width: 150;
  height: 150;
  border-radius: 100px 0;
} 
.left {
  z-index: 1;
  background: #1A4341;
  margin-left: -100;
}
.middle {
  z-index: 2;
  background: #998235;
} 
.right{
  z-index:3;
  background: #F3AC3C;
  margin-left: 100;
}

Примечание: В CSS Battle вы можете использовать 100 вместо 100px. Вам не нужно определять px в CSS. Однако, если вы используете rem или %, вам нужно передать их отдельно. Поэтому в приведенном выше коде CSS в основном отсутствуют единицы. Для более подробной информации посетите здесь

Минифицируйте код или CSS с помощью любого CSS Minifier. Это поможет вам сократить количество символов в коде, что увеличит количество баллов.

Codepen

Подведение итогов

Если вам понравилось, не забудьте поставить ❤️. Увидимся в следующей статье. До скорой встречи.