CSS Battle: #9 — Tesseract

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

Проблема

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

Решение

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

HTML

<div class="rect"></div>
<div class="square"></div>
<div class="circle"></div>

CSS

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

body {
  margin: 0;
  background: #222730;
  display: grid;
  place-items: center;
}
.rect {
  width: 100%;
  height: 150px;
  background: #4caab3;
}
.square {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #4caab3;
  transform: rotate(45deg);
  box-shadow: 0 0 0 50px #222730;
}
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #393e46;
  border-radius: 50px;
}

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

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

Обертывание

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