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