CSS Battle: #12 — Парикмахерские усы

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

Проблема

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

Решение

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

HTML

<p l>
<p m>  
<p r>  
<p d>  

CSS

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

body {
  margin: 0;
  background: #f5d6b4;
}
p {
  position: fixed;
}

[l], [m], [r] {
  width: 60;
  height: 30;
  border: 20px solid #d86f45;
  border-radius: 0 0 1in 1in;
  border-top: 0;
  bottom: 85;
}
[l] { left: 70 }
[r] { right: 70 }
[m] {
  transform: scaleY(-1);
  bottom: 135;
  left: 150;
}
[d] {
  width: 20;
  height: 20;
  background: #d86f45;
  border-radius: 1in;
  left: 70;
  bottom: 124;
  box-shadow: 240px 0 #d86f45;
}

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

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

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

<p l><p m><p r><p d><style>body{margin:0;background:#F5D6B4}p{position:fixed}[l],[m],[r]{width:60;height:30;border:20px solid #D86F45;border-radius:0 0 1in 1in;border-top:0;bottom:85}[l]{left:70}[r]{right:70}[m]{transform:scaleY(-1);bottom:135;left:150}[d]{width:20;height:20;background:#D86F45;border-radius:1in;left:70;bottom:124;box-shadow:240px 0 #D86F45}

Обертывание

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