.hex-main { display:flex; --s: 155px; /* size */ --m: 4px; /* margin */ --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px); } .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); }