<div class="g-parent">
<div class="g-container">
<div class="g-item"></div>
</div>
</div>
<div class="g-parent">
<div class="g-container">
<div class="g-item"></div>
</div>
</div>
<div class="g-parent">
<div class="g-container">
<div class="g-item"></div>
</div>
</div>
xxxxxxxxxx
html, body {
width: 100vw;
height: 100vh;
display: flex;
}
.g-parent {
margin: 50px auto;
}
.g-container,
.g-parent {
position: relative;
display: flex;
width: 150px;
height: 150px;
}
.g-item {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
clip-path: polygon(25% 0%,71% 66%,59% 0%,79% 23%,95% 4%,100% 40%,77% 100%,38% 100%,47% 71%,36% 30%,23% 60%,0% 100%,5% 37%);
}
.g-container {
box-reflect: below;
}
.g-parent {
box-reflect: left;
}
.g-parent:nth-child(2) .g-item {
clip-path: polygon(11% 0%,55% 32%,59% 0%,79% 23%,100% 0%,81% 52%,55% 100%,55% 58%,22% 100%,38% 47%,27% 49%,0% 100%,22% 36%);
}
.g-parent:nth-child(3) .g-item {
clip-path: polygon(40% 0%,0% 91%,52% 100%,0% 37%,77% 23%,77% 76%,43% 22%,55% 88%,100% 100%,100% 10%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.