タイル張りの平たい六角形

Question

私はJames Tauberの偉大なCSS hexagon tutorialを見つけました。ページの最後に示されている擬似要素メソッドを使用して、ビューポート全体を塗りつぶす、フラットトッピングされた六角形のグリッドを作成します。次のように私は、六角形自身のために書いたコードは次のとおりです。

.hex { 
    float:left; 
    position: relative; 
    width: 15vw; 
    height: 25vw; 
    background-color: #64C7CC; 
    margin-left: 8vw; 
} 

.hex:before, 
.hex:after { 
    position: absolute; 
    content: ""; 
    border-top: 12.5vw solid transparent; 
    border-bottom: 12.5vw solid transparent; 
} 

.hex:before { 
    border-right: 9vw solid #64C7CC; 
    right:15vw; 
} 

.hex:after { 
    border-left: 9vw solid #64C7CC; 
    left:15vw; 
} 

ここfiddleです。

チュートリアルに示すタイリングの例と擬似要素法を組み合わせる際に問題があります。どのようにして、ページを塗りつぶすためにシェイプを繰り返すことができますか？ビューポートの端の近くに残す小さな隙間でも可能ですか？ここで

Answer 1

Demo

.hex { 
 
    float:left; 
 
    position: relative; 
 
    width: 15vw; 
 
    height: 25vw; 
 
    background-color: #64C7CC; 
 
    margin: 12vw; 
 
} 
 

 
.hex:before, 
 
.hex:after { 
 
    position: absolute; 
 
    content: ""; 
 
    border-top: 12.5vw solid transparent; 
 
    border-bottom: 12.5vw solid transparent; 
 
} 
 

 
.hex:before { 
 
    border-right: 9vw solid #64C7CC; 
 
    right:15vw; 
 
} 
 

 
.hex:after { 
 
    border-left: 9vw solid #64C7CC; 
 
    left:15vw; 
 
}

<div class="hex"> 
 
</div> 
 

 
<div class="hex"> 
 
</div>

です