<h2>Temani</h2>
<h2 class="alt" style="font-size: 3rem;--d:.3em;--s:.3em">AFIF</h2>
<h2 style="background-color: #d81a14;--d:.1em">569324</h2>
h2 {
--s: .4em; /* space between boxes*/
--d: .2em; /* the depth */
--p: .3em; /* the inline padding */
font-family: monospace; /* only for monospace font */
font-size: 2.8rem;
line-height: 1.5; /* control the height of the boxes */
color: #fff;
letter-spacing: calc(var(--s) + var(--d) + 2*var(--p));
padding-left: var(--p);
padding-bottom: var(--d);
clip-path: inset(0 calc(var(--p) + var(--s)) 0 0);
--_g:calc(1ch + var(--s) + var(--d) + 2*var(--p));
background:
conic-gradient(at calc(100% - var(--d) - var(--s)) calc(100% - var(--d)),
#0008 37.5%,#0004 75%,#0000 0) 0 0/var(--_g) 100%
#8A9B0F; /* the main color */
-webkit-mask:
conic-gradient(from -45deg at calc(100% - var(--s)) var(--d),#0000 62.5%,#000 0)
0 0/var(--_g) 50% repeat-x,
conic-gradient(at var(--s) calc(100% - var(--d)),#000 37.5%,#0000 0)
calc(-1*var(--s)) 100%/var(--_g) 50% repeat-x;
}
h2.alt {
padding-left: calc(var(--p) + var(--d));
clip-path: inset(0 calc(var(--p) + 2*var(--s)) 0 0);
background:
conic-gradient(at calc(var(--d) + var(--s)) calc(100% - var(--d)),
#0000 25%,#0008 0 62.5%,#0004 0)
calc(-1*var(--s)) 0/var(--_g) 100%
#2699dc; /* the main color */
-webkit-mask:
conic-gradient(at calc(100% - var(--s)) calc(100% - var(--d)),#0000 62.5%,#000 0)
0 100%/var(--_g) 50% repeat-x,
conic-gradient(from 45deg at var(--s) var(--d),#000 37.5%,#0000 0)
calc(-1*var(--s)) 0/var(--_g) 50% repeat-x;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
gap: 30px;
background: #f2f2f2;
}
h2 {
margin: 0;
text-transform: uppercase;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.