Sobes.tech
Middle

Izveidojiet STOP zīmi (sarkans aplis ar baltu joslu un dubultu maliņu), izmantojot tikai vienu div un CSS (pseidoelementi ir atļauti).

sobes.tech AI

Atbilde no 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 — белая полоса, расположенная горизонтально с небольшим наклоном, имитирующая знак "СТОП".

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