Штабелирование светофорных форм

Question

Я пытаюсь сделать что-то очень простое. Мне нужно создать основную форму светофора с прямоугольником и тремя кругами внутри него. Я пробовал использовать SVG для фигур, но для жизни я не могу понять, как заставить круги правильно наложить на прямоугольник. Это не должно быть интерактивным или что-то еще. Любая помощь высоко ценится!

Answer 1

Я объединил его, используя только HTML и CSS. Просмотрите фрагмент стека ниже или как jsFiddle.

.container{ background: none repeat scroll 0 0 #000; 
 
    height: 100px; 
 
    padding: 10px; 
 
    width: 30px;} 
 
.red, .yellow, .green{border-radius: 100%; 
 
    height: 25px; 
 
    margin-top: 3px; 
 
    padding: 2px; 
 
    width: 25px;} 
 
.red{background: red;} 
 
.yellow{background: yellow;} 
 
.green{background: green;}

<div class="container"> 
 
    <div class="red"></div> 
 
    <div class="yellow"></div> 
 
    <div class="green"></div> 
 
</div>