This commit is contained in:
parent
66cc98ecfc
commit
16a249c9d4
@ -29,3 +29,26 @@
|
|||||||
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
-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%);
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
@ -55,8 +55,8 @@
|
|||||||
</a>
|
</a>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<div class="hex">
|
<div class="hex-main">
|
||||||
<div class="hex-background">
|
<div class="hex-container">
|
||||||
<img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584">
|
<img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user