交通信号用のCSSシェイプ

Question

私はここで苦労しています。私はCSSを非常に新しくしています。私は正方形の上に円を得ようとしています。私はいくつかの研究をしており、私の制御された評価のためにできるだけ勉強しようとしています。私はあなたが画像を使用できることを知っていますが、私はすべてのオプションをチェックしています 何が間違っていますか？

.circle { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: black; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 
.circle0 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: black; 
 
    position: absolute; 
 
    z-index: 3; 
 
    top: 27%; 
 
} 
 
.circle1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: black; 
 
    position: absolute; 
 
    z-index: 4; 
 
    top: 54%; 
 
} 
 
.square { 
 
    width: 200px; 
 
    height: 600px; 
 
    background-color: white; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: black; 
 
    z-index: 1; 
 
}

<div class="square"></div> 
 
<div class="circle"></div> 
 
<div class="circle0"></div> 
 
<div class="circle1"></div>

Answer 1

あなたは3円のdivの周り.square div要素をラップする必要があります。

<div class="square"> 
    <div class="circle"></div> 
    <div class="circle0"></div> 
    <div class="circle1"></div> 
</div> 

Fiddle