This commit is contained in:
parent
ef65feaa71
commit
e18923fe3a
@ -0,0 +1,37 @@
|
||||
|
||||
|
||||
.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 div {
|
||||
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 div: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));
|
||||
}
|
||||
|
||||
|
@ -59,6 +59,17 @@
|
||||
</div>
|
||||
<article id="m15135655" class="post__message ">
|
||||
<a href="/news/res/15135633.html#15135633" class="post-reply-link" data-thread="15135633" data-num="15135633">>>15135633 (OP)</a><br>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="hex-main">
|
||||
<div class="hex-container">
|
||||
<div>
|
||||
<img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" class="post__file-preview " data-type="2" data-title="image.png" data-width="954" data-height="960" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
{% for pic in thread.pic_links %}
|
||||
|
Loading…
Reference in New Issue
Block a user