CSS Battle: #13 — Totally Triangle

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

Проблема

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

Решение

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

HTML

<p> 

CSS

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

* {
  margin: 0;
  background: #0b2429;
}
p {
  position: fixed;
  width: 200;
  height: 200;
  background: #f3ac3c;
  transform: rotate(45deg);
  left: -100;
  top: -100;
}

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

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

Минифицированная версия:

<p><style>*{margin:0;background:#0B2429}p{position:fixed;width:200;height:200;background:#F3AC3C;transform:rotate(45deg);left:-100;top:-100}

Альтернативный метод

CSS

body {
  background: linear-gradient(135deg, #f3ac3c 100px, #0b2429 100px);
}

Вы можете добиться этого, используя linear-gradient(), что также намного проще. В этом случае вам даже не понадобится HTML.

Завершение

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