Question

我试图做一些非常简单的事情。我需要创建一个基本的红绿灯形状，其中包含一个矩形和三个圆圈。我尝试使用SVG的形状，但对于我的生活，我无法弄清楚如何让圆圈在矩形上正确重叠。它不必是互动的或任何东西。非常感谢任何帮助！

Answer 1

我只使用HTML和CSS将其中一个放在一起。查看下方的Stack Snippet或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>

堆叠交通灯形状

1 个答案: