/* украдено здесь https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/ */

.hex-main {
    display:flex;
    --s: 100px;  /* size  */
    --m: 4px;    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
    max-width: 440px;
}
  
.hex-container {
    font-size: 0; /*disable white space between inline block element */
}
  
.hex-container img {
    width:  var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547); 
    display: inline-block;
    font-size:initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: red;
    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}

.hex-container img:nth-child(odd) {
    background:green;
  }
.hex-container::before {
content: "";
    width: calc(var(--s)/2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(     
                    #0000 0 calc(var(--f) - 3px),      
                    #000  0 var(--f));
}