<div class="grid">
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
<div class="cube">
<div class="item-box">
<div class="item-box-inner">
<div
class="item-box-shadow-right"
role="presentation"
></div>
<div
class="item-box-shadow-bottom"
role="presentation"
></div>
<div class="item-clip-path">
<!-- Content here-->
</div>
</div>
</div>
<!-- label--bottom -->
<div class="label label--top">
<div
class="label-shadow"
>
Label text
</div>
</div>
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cube {
--triangle-width: 4px;
--triangle-height: 4px;
--shadow-width: 20px;
}
.item-clip-path {
aspect-ratio: 1 / 1;
border-style: solid;
border-width: 3px;
border-color: black;
position: relative;
clip-path: polygon(
2px 0,
calc(100% - 2px) 0,
100% 2px,
100% calc(100% - 2px),
calc(100% - 2px) 100%,
2px 100%,
0% calc(100% - 2px),
0 2px
);
}
.cube {
position: relative;
padding-left: calc(var(--triangle-width) * 2 + 4px);
/* height for label */
padding-top: 14px;
}
.label {
position: absolute;
left: 0;
width: 50%;
}
.label--top {
top: 0;
}
.label-shadow {
padding: 0 4px;
display: inline-block;
border-style: solid;
border-color: black;
background-color: white;
border-radius: 4px;
border-width: 2px;
position: relative;
}
.label-shadow::before {
border-style: solid;
border-color: black;
content: "";
display: block;
position: absolute;
left: 2px;
top: calc(100% + 2px);
border-top-width: var(--triangle-height);
border-right-width: var(--triangle-width);
border-bottom: var(--triangle-height) solid transparent;
border-left: var(--triangle-width) solid transparent;
}
.item-box {
padding: 0 var(--shadow-width) var(--shadow-width) 0;
}
.item-box-inner {
position: relative;
}
.item-box-shadow-right {
background-color: #9f9f9f;
width: calc(var(--shadow-width) + 1px);
height: calc(100% - 2px);
position: absolute;
top: calc(var(--shadow-width) / 2 + 1.5px);
right: calc(var(--shadow-width) * -1);
transform: skew(0deg, 45deg);
}
.item-box-shadow-bottom {
background-color: #464646;
height: calc(var(--shadow-width) + 1px);
width: calc(100% - 2px);
position: absolute;
left: calc(var(--shadow-width) / 2 + 1.5px);
bottom: calc(var(--shadow-width) * -1);
transform: skew(45deg, 0deg);
}
</style>