<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.