flask-htmx-board1/static/src/vdk2ch.css

42 lines
1.0 KiB
CSS
Raw Normal View History

2023-07-12 02:16:34 +10:00
/* украдено здесь https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/ */
2023-07-12 01:53:31 +10:00
.hex-main {
display:flex;
2023-07-12 02:15:09 +10:00
--s: 100px; /* size */
2023-07-12 01:53:31 +10:00
--m: 4px; /* margin */
--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
2023-07-12 02:20:03 +10:00
max-width: 440px;
2023-07-12 02:24:36 +10:00
margin: 15px;
2023-07-12 01:53:31 +10:00
}
.hex-container {
font-size: 0; /*disable white space between inline block element */
}
.hex-container img {
2023-07-12 02:15:09 +10:00
width: var(--s);
2023-07-12 01:53:31 +10:00
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%);
2023-07-13 20:35:37 +10:00
background: transparent;
2023-07-12 01:53:31 +10:00
margin-bottom: calc(var(--m) - var(--s)*0.2885);
2023-07-12 02:10:22 +10:00
}
.hex-container img:nth-child(odd) {
2023-07-13 20:35:37 +10:00
background: transparent;
2023-07-14 02:04:38 +10:00
}
2023-07-12 02:10:22 +10:00
.hex-container::before {
2023-07-14 02:04:38 +10:00
content: "";
2023-07-12 02:10:22 +10:00
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));
}
2023-07-13 21:01:57 +10:00
2023-07-14 02:04:38 +10:00