2023-07-12 01:36:34 +10:00
|
|
|
.hex {
|
|
|
|
display: block;
|
|
|
|
margin: 0 auto;
|
|
|
|
position: relative;
|
|
|
|
width: 320px;
|
|
|
|
height: 277.12px; /* width * 0.866 */
|
|
|
|
background: red;
|
|
|
|
box-sizing: border-box;
|
|
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
2023-07-12 01:23:49 +10:00
|
|
|
}
|
2023-07-12 01:53:31 +10:00
|
|
|
|
2023-07-12 01:36:34 +10:00
|
|
|
.hex-background {
|
|
|
|
position: absolute;
|
|
|
|
background-color: orange; /*color of the main-background*/
|
|
|
|
top: 2px; /* equal to border thickness */
|
|
|
|
left: 2px; /* equal to border thickness */
|
|
|
|
width: 316px; /* container height - (border thickness * 2) */
|
|
|
|
height: 273.12px; /* container height - (border thickness * 2) */
|
|
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
2023-07-12 01:23:49 +10:00
|
|
|
}
|
|
|
|
|
2023-07-12 01:36:34 +10:00
|
|
|
.hex img {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
2023-07-12 01:53:31 +10:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hex-main {
|
|
|
|
display:flex;
|
|
|
|
--s: 100px; /* 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);
|
|
|
|
}
|