annother hexxo
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Simple_Not 2023-07-12 01:36:34 +10:00
parent f952ef97c6
commit 77b3520b12
2 changed files with 33 additions and 53 deletions

View File

@ -1,48 +1,31 @@
.hex {
display: block;
.hex-main { margin: 0 auto;
display:flex; position: relative;
--s: 100px; /* size */ width: 320px;
--m: 4px; /* margin */ height: 277.12px; /* width * 0.866 */
--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px); 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%);
} }
.hex-container { .hex-background {
font-size: 0; /*disable white space between inline block element */ 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%);
} }
.hex img {
.hex-container img { position: absolute;
width: var(--s); width: 100%;
margin: var(--m); height: 100%;
height: calc(var(--s)*1.1547); object-fit: cover;
display: inline-block; -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
font-size:initial; -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin-bottom: calc(var(--m) - var(--s)*0.2885);
} }
.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));
}
*/

View File

@ -61,14 +61,11 @@
<a href="/news/res/15135633.html#15135633" class="post-reply-link" data-thread="15135633" data-num="15135633">&gt;&gt;15135633 (OP)</a><br> <a href="/news/res/15135633.html#15135633" class="post-reply-link" data-thread="15135633" data-num="15135633">&gt;&gt;15135633 (OP)</a><br>
<div class="hex">
<div class="hex-background">
<div class="hex-main"> <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 class="hex-container">
<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> </div>
<!--
{% for pic in thread.pic_links %} {% for pic in thread.pic_links %}
<svg class="post__file-preview " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg class="post__file-preview " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg">