Sobes.tech
Назад к вопросам
Middle
7

Свёрстай знак СТОП (красный круг с белой полосой и двойной границей) используя только один div и CSS (псевдоэлементы разрешены).

Компании, где спрашивали
Mayflower

Ответ от нейросети

sobes.tech AI

Для создания знака СТОП с красным кругом, белой полосой и двойной границей, используя один div и CSS с псевдоэлементами, можно сделать так:

.stop-sign {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  border: 8px solid white; /* внутренняя белая граница */
  border-radius: 50%;
  box-sizing: border-box;
  outline: 8px solid #8B0000; /* внешняя темно-красная граница */
}

.stop-sign::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  background: white;
  transform: translateY(-50%) rotate(-15deg); /* наклон полосы */
  border-radius: 4px;
}
<div class="stop-sign"></div>

Объяснение:

  • div с классом .stop-sign — красный круг с двойной границей: внешняя граница через outline, внутренняя — через border.
  • Псевдоэлемент ::before — белая полоса, расположенная горизонтально с небольшим наклоном, имитирующая знак "СТОП".

Можно подстроить размеры и цвета для более точного соответствия.