CSS Battle: #8 — Forking Crazy

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

Проблема

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

Решение

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

HTML

<div class="root"></div>
<div class="slot"></div>
<div class="point"></div>
<div class="handle"></div>

CSS

Теперь давайте оформим контейнеры.

body {
  margin: 0;
  background: #6592cf;
  display: grid;
  place-items: center;
}
.root {
  position: absolute;
  width: 140;
  height: 190;
  background: #060f55;
  border-radius: 0 0 100px 100px;
  margin-top: 10;
}
.slot {
  width: 20;
  height: 100;
  background: #6592CF;
  z-index: 1;
  border-radius: 0 0 100px 100px;
  margin:20 0 0 0;
  box-shadow: -40px 0 0 #6592CF, 40px 0 0 #6592CF;
}
.point {
  width: 20;
  height: 20;
  background: #060F55;
  border-radius: 10px;
  transform: translate(-60px, -190px);
  box-shadow : 40px 0 0 #060F55, 80px 0 0 #060F55, 120px 0 0 #060F55; 
}

.handle{
  position: absolute;
  bottom:0;
  width: 20;
  height:60;
  background: #060F55;
}

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

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

Codepen

Видео

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

Есть много способов решить эту проблему. Вы можете поделиться своим подходом в комментариях. Если вам понравилось, не забудьте поставить ❤️. И до встречи в следующей статье. До скорой встречи.